Vaadin-combo-box: Estilo de elementos del cuadro combinado

¿Existe alguna solución alternativa disponible?

Debido a que los estilos externos no penetran en el DOM de sombra, debe importar el archivo CSS dentro del DOM de sombra.

Quizás este hilo de StackOverflow ayude.

Según la segunda respuesta en ese hilo, <link rel="stylesheet"> debería funcionar dentro de shadow DOM. Entonces, algo como esto podría funcionar en su 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);

... o usando @import sugerido en la primera respuesta:

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

Sin embargo, no he probado adecuadamente estos fragmentos.

@ steffen-harbich-itc, ¿lograste que funcionara usando uno de esos enfoques o de alguna otra manera? Me interesaría escuchar. :)

Probé tu segunda sugerencia y funcionó . No probé el primer enfoque. Sin embargo, intenté agregar " @import ..." en mi shared-styles.html en

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

pero eso no funcionó.

Por lo tanto, existe una solución alternativa para el problema, pero en mi opinión, todavía hay algo inconsistente con el comportamiento en contraste con ListItems.

¡Es bueno escuchar que al menos un enfoque funciona!

Acerca de su enfoque de estilos compartidos: debe establecer theme-for="vaadin-combo-box-item" , ya que ese es el elemento en el que se deben inyectar los estilos. Sin embargo, es posible que aún no funcione con ComponentRenderer , porque este renderizador crea un componente web adicional (y por lo tanto shadow-root), entre vaadin-combo-box-item y sus componentes agregados.

La capacidad de estilo de los elementos y si deben o no estar dentro de shadow DOM concierne al componente web (este repositorio incluye solo el contenedor de Java), por lo que moveré este ticket al repositorio vaadin-combo-box.

Una forma correcta de manejar esto sería crear un dom-module como este:

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

No se garantiza que el uso de @import funcione y no se recomienda.

No existe una solución fácil para el problema y no es específico del componente vaadin-combo-box .
Deberíamos documentar las limitaciones de Shadow DOM y CSS externo en el nuevo sitio de documentos.

De lo contrario, no tenemos nada que hacer aquí. Déjame cerrar esto porque no es un error.

Todavía esperaría que los elementos del cuadro combinado no se coloquen dentro del DOM en la sombra, sino en ranuras separadas.

Los elementos del cuadro combinado no deben colocarse dentro del DOM en la sombra, sino en espacios separados.

Podemos considerar esto como un posible cambio radical en la próxima versión importante.

La exposición de los elementos debe hacerse de manera que funcionen con el componente de desplazamiento virtual (que definitivamente se cambiará de iron-list a otra cosa, debe decidirse).