Vaadin-combo-box: Combobox-Elemente stylen

Gibt es eine Problemumgehung?

Da externe Stile nicht in das Shadow-DOM eindringen, müssen Sie die CSS-Datei in das Shadow-DOM importieren.

Vielleicht hilft dieser StackOverflow-Thread .

Basierend auf der zweiten Antwort in diesem Thread sollte <link rel="stylesheet"> innerhalb von Shadow-DOM funktionieren. So etwas könnte also in Ihrem ComponentRenderer funktionieren:

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

... oder die in der ersten Antwort vorgeschlagenen @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);

Ich habe diese Schnipsel selbst jedoch nicht richtig getestet.

@steffen-harbich-itc, hast du es mit einem dieser Ansätze oder auf andere Weise zum Laufen gebracht? Es würde mich interessieren zu hören. :)

Ich habe deinen zweiten Vorschlag ausprobiert und es hat funktioniert . Den ersten Ansatz habe ich nicht probiert. Ich habe jedoch versucht, das " @import ..." in meine shared-styles.html in . einzufügen

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

aber das hat nicht funktioniert.

Es gibt also eine Problemumgehung für das Problem, aber IMO gibt es im Gegensatz zu ListItems immer noch etwas, das mit dem Verhalten nicht übereinstimmt.

Schön zu hören, dass zumindest ein Ansatz funktioniert!

Zu Ihrem Shared-Styles-Ansatz: Sie sollten theme-for="vaadin-combo-box-item" , da dies das Element ist, in das die Styles eingefügt werden sollen. Es funktioniert jedoch möglicherweise immer noch nicht mit ComponentRenderer , da dieser Renderer eine zusätzliche Webkomponente (und damit Shadow-Root) zwischen vaadin-combo-box-item und Ihren hinzugefügten Komponenten erstellt.

Die Stilbarkeit der Elemente und ob sie sich im Shadow-DOM befinden sollen oder nicht, betrifft die Webkomponente (dieses Repository enthält nur den Java-Wrapper dafür), daher werde ich dieses Ticket in das Repository vaadin-combo-box verschieben.

Eine korrekte Vorgehensweise wäre, ein dom-module wie folgt zu erstellen:

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

Die Verwendung von @import funktioniert nicht garantiert und wird nicht empfohlen.

Es gibt keine einfache Lösung für das Problem und es ist nicht spezifisch für die vaadin-combo-box Komponente.
Wir sollten die Einschränkungen von Shadow DOM und externem CSS auf der neuen Docs-Site dokumentieren.

Sonst haben wir hier nichts zu tun. Lassen Sie mich dies schließen, da es sich nicht um einen Fehler handelt.

Ich würde immer noch erwarten, dass Combobox-Elemente nicht im Schatten-DOM, sondern in separaten Slots platziert werden sollten.

Combobox-Elemente sollten nicht im Schatten-DOM platziert werden, sondern in separaten Slots.

Wir können dies als potenzielle Breaking Change in der nächsten Hauptversion betrachten.

Das Freilegen der Elemente muss so erfolgen, dass sie mit der virtuellen Scroller-Komponente funktionieren (die definitiv von iron-list auf etwas anderes geändert wird - muss entschieden werden).