Vaadin-combo-box: コンボボックスアイテムのスタイリング

利用可能な回避策はありますか？

外部スタイルはShadowDOMに浸透しないため、ShadowDOM内にCSSファイルをインポートする必要があります。

たぶん、このStackOverflowスレッドが役立ちます。

そのスレッドの2番目の回答に基づいて、 <link rel="stylesheet">はShadowDOM内で機能するはずです。 したがって、このようなものが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);

...または最初の回答で提案された@importを使用します：

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);

ただし、これらのスニペットを自分で適切にテストしていません。

@ steffen-harbich-itc、これらのアプローチの1つまたは他の方法を使用して、なんとか機能させることができましたか？ 聞きたいです。 :)

私はあなたの2番目の提案を試しましたが、うまくいき@ import ...」をshared-styles.htmlに追加しようとしました。

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

しかし、それはうまくいきませんでした。

そのため、この問題の回避策は利用できますが、IMOには、ListItemsとは対照的に動作と矛盾するものがまだあります。

少なくとも1つのアプローチが機能すると聞いてうれしいです！

共有スタイルのアプローチについて： theme-for="vaadin-combo-box-item"を設定する必要があります。これは、スタイルを挿入する要素であるためです。 ただし、このレンダラーはvaadin-combo-box-itemと追加されたコンポーネントの間に追加のWebコンポーネント（したがってシャドウルート）を作成するため、 ComponentRendererではまだ機能しない可能性があります。

アイテムのスタイル設定と、Shadow DOM内に配置する必要があるかどうかは、Webコンポーネント（このリポジトリにはJavaラッパーのみが含まれます）に関係するため、このチケットをvaadin-combo-boxリポジトリに移動します。

これを処理する正しい方法は、次のようにdom-moduleを作成することです。

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

@importは動作が保証されていないため、お勧めしません。

この問題を簡単に修正することはできず、 vaadin-combo-boxコンポーネントに固有のものではありません。
新しいドキュメントサイトで、ShadowDOMと外部CSSの制限を文書化する必要があります。

そうでなければ、ここで私たちがすることは何もありません。 バグではないので、これを閉じさせてください。

それでも、コンボボックスアイテムはシャドウDOM内ではなく、別々のスロットに配置する必要があると思います。

コンボボックスアイテムは、Shadow DOM内ではなく、別々のスロットに配置する必要があります。

これは、次のメジャーリリースでの潜在的な重大な変更と見なすことができます。

アイテムの公開は、仮想スクローラーコンポーネントで機能するように行う必要があります（これは、 iron-listから別のものに確実に変更されます-決定する必要があります）。