Vaadin-combo-box: Menata item kotak kombo

Apakah ada solusi yang tersedia?

Karena gaya eksternal tidak menembus ke dalam shadow DOM, Anda perlu mengimpor file CSS di dalam shadow DOM.

Mungkin utas StackOverflow ini membantu.

Berdasarkan jawaban kedua di utas itu, <link rel="stylesheet"> harus bekerja di dalam shadow DOM. Jadi sesuatu seperti ini bisa bekerja di ComponentRenderer :

Element link = new Element("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "./frontend/bower_components/flag-icon-css/css/flag-icon.min.css");
item.getElement().appendChild(link);

atau menggunakan @import disarankan di jawaban pertama:

Element style = new Element("style");
style.setProperty("innerHTML", "<strong i="15">@import</strong> \"./frontend/bower_components/flag-icon-css/css/flag-icon.min.css\"");
item.getElement().appendChild(style);

Saya sendiri belum menguji cuplikan ini dengan benar.

@steffen-harbich-itc, apakah Anda berhasil membuatnya bekerja dengan menggunakan salah satu pendekatan itu atau cara lain? Saya akan tertarik untuk mendengar. :)

Saya mencoba saran kedua Anda dan berhasil . Saya tidak mencoba pendekatan pertama. Namun, saya mencoba menambahkan " @import ..." ke shared-styles.html saya di

 <dom-module id="my-combo-box-theme" theme-for="vaadin-combo-box">
   <template>
     <style>...

tapi itu tidak berhasil.

Jadi solusi tersedia untuk masalah ini tetapi IMO masih ada sesuatu yang tidak konsisten dengan perilaku yang berbeda dengan ListItems.

Senang mendengar bahwa setidaknya satu pendekatan berhasil!

Tentang pendekatan gaya bersama Anda: Anda harus menetapkan theme-for="vaadin-combo-box-item" , karena itulah elemen yang harus disuntikkan gaya. Namun, ini mungkin masih tidak berfungsi dengan ComponentRenderer , karena perender ini membuat dan komponen web tambahan (dan dengan demikian shadow-root), antara vaadin-combo-box-item dan komponen yang Anda tambahkan.

Stylability item dan apakah mereka harus berada di dalam shadow DOM atau tidak menyangkut komponen web (repositori ini hanya menyertakan pembungkus Java untuk itu), jadi saya akan memindahkan tiket ini ke repositori vaadin-combo-box.

Cara yang benar untuk menangani ini adalah dengan membuat dom-module seperti ini:

<dom-module id="my-item-css" theme-for="vaadin-combo-box-item">
  <template>
    <style>
    /* styles from flag-icons.css */
    </style>
  </template>
</dom-module>

Menggunakan @import tidak dijamin berhasil dan tidak disarankan.

Tidak ada perbaikan yang mudah untuk masalah ini, dan itu tidak spesifik untuk komponen vaadin-combo-box .
Kita harus mendokumentasikan batasan shadow DOM & CSS eksternal di situs dokumen baru.

Kalau tidak, tidak ada yang bisa kita lakukan di sini. Jadi izinkan saya menutup ini karena ini bukan bug.

Saya masih berharap bahwa item kotak kombo tidak boleh ditempatkan di dalam shadow DOM tetapi di slot terpisah.

item kotak kombo tidak boleh ditempatkan di dalam shadow DOM tetapi di slot terpisah.

Kami dapat menganggap ini sebagai potensi perubahan besar dalam rilis besar berikutnya.

Mengekspos item perlu dilakukan dengan cara mereka bekerja dengan komponen scroller virtual (yang pasti akan diubah dari iron-list menjadi sesuatu yang lain - harus diputuskan).