Vaadin-combo-box: Styliser les éléments de la zone de liste déroulante

Existe-t-il une solution de contournement ?

Étant donné que les styles externes ne pénètrent pas dans le DOM fantôme, vous devez importer le fichier CSS à l'intérieur du DOM fantôme.

Peut - être que

Sur la base de la deuxième réponse de ce fil, <link rel="stylesheet"> devrait fonctionner dans shadow DOM. Donc quelque chose comme ça pourrait fonctionner dans votre 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);

...ou en utilisant @import suggéré dans la première réponse :

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

Je n'ai pas testé correctement ces extraits moi-même.

@steffen-harbich-itc, avez-vous réussi à le faire fonctionner en utilisant l'une de ces approches ou d'une autre manière ? Je serais intéressé d'entendre. :)

J'ai essayé votre deuxième suggestion et cela a fonctionné . Je n'ai pas essayé la première approche. Cependant, j'ai essayé d'ajouter le " @import ..." dans mon shared-styles.html dans

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

mais cela n'a pas fonctionné.

Une solution de contournement est donc disponible pour le problème, mais selon l'OMI, il y a toujours quelque chose d'incohérent avec le comportement contrairement à ListItems.

C'est bon d'entendre qu'au moins une approche fonctionne !

À propos de votre approche des styles partagés : vous devez définir theme-for="vaadin-combo-box-item" , car c'est l'élément dans lequel les styles doivent être injectés. Cependant, il se peut que cela ne fonctionne toujours pas avec ComponentRenderer , car ce moteur de rendu crée un composant Web supplémentaire (et donc shadow-root), entre le vaadin-combo-box-item et vos composants ajoutés.

La stylabilité des éléments et s'ils doivent ou non être à l'intérieur du shadow DOM concerne le composant Web (ce référentiel n'inclut que le wrapper Java pour cela), je vais donc déplacer ce ticket vers le référentiel vaadin-combo-box.

Une façon correcte de gérer cela serait de créer un dom-module comme ceci :

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

L'utilisation de @import n'est pas garantie de fonctionner et n'est pas recommandée.

Il n'y a pas de solution facile au problème, et ce n'est pas spécifique au composant vaadin-combo-box .
Nous devrions documenter les limitations du shadow DOM et du CSS externe dans le nouveau site de documentation.

Sinon, nous n'avons rien à faire ici. Alors permettez-moi de fermer ceci car ce n'est pas un bug.

Je m'attendrais toujours à ce que les éléments de la zone de liste déroulante ne soient pas placés dans le DOM fantôme mais dans des emplacements séparés.

les éléments de la zone de liste déroulante ne doivent pas être placés dans le DOM fantôme mais dans des emplacements séparés.

Nous pouvons considérer cela comme un changement de rupture potentiel dans la prochaine version majeure.

L'exposition des éléments doit être effectuée de manière à ce qu'ils fonctionnent avec le composant de défilement virtuel (qui sera définitivement modifié de iron-list à autre chose - doit être décidé).