Vaadin-combo-box: Itens da caixa de combinação de estilo

Existe uma solução alternativa disponível?

Como os estilos externos não penetram no DOM da sombra, você precisa importar o arquivo CSS dentro do DOM da sombra.

Talvez este thread StackOverflow ajude.

Com base na segunda resposta desse tópico, <link rel="stylesheet"> deve funcionar dentro do DOM shadow. Portanto, algo como isso poderia funcionar em seu 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 usando @import sugerido na primeira resposta:

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

Eu mesmo não testei adequadamente esses fragmentos.

@ steffen-harbich-itc, você conseguiu fazer funcionar usando uma dessas abordagens ou de alguma outra forma? Eu estaria interessado em ouvir. :)

Tentei sua segunda sugestão e funcionou . Não tentei a primeira abordagem. No entanto, tentei adicionar " @import ..." em meu shared-styles.html em

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

mas isso não funcionou.

Portanto, uma solução alternativa está disponível para o problema, mas IMO ainda há algo inconsistente com o comportamento de ba em contraste com ListItems.

É bom saber que pelo menos uma abordagem funciona!

Sobre sua abordagem de estilos compartilhados: você deve definir theme-for="vaadin-combo-box-item" , pois esse é o elemento no qual os estilos devem ser injetados. No entanto, ele ainda pode não funcionar com ComponentRenderer , porque este renderizador cria um componente da web adicional (e, portanto, a raiz da sombra), entre vaadin-combo-box-item e seus componentes adicionados.

A estilização dos itens e se eles devem ou não estar dentro do DOM sombra diz respeito ao componente da web (este repositório inclui apenas o wrapper Java para ele), portanto, moverei este tíquete para o repositório vaadin-combo-box.

Uma maneira correta de lidar com isso seria criar um 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>

Usar @import não tem garantia de funcionamento e não é recomendado.

Não existe uma solução fácil para o problema e não é específico para o componente vaadin-combo-box .
Devemos documentar as limitações do shadow DOM e CSS externo no novo site de documentos.

Caso contrário, não há nada para fazermos aqui. Então, deixe-me fechar isso porque não é um bug.

Eu ainda esperaria que os itens da caixa de combinação não fossem colocados no DOM sombra, mas em slots separados.

os itens da caixa de combinação não devem ser colocados no DOM sombra, mas em slots separados.

Podemos considerar isso como uma mudança potencial significativa no próximo lançamento principal.

A exposição dos itens precisa ser feita de forma que funcionem com o componente de rolagem virtual (que será definitivamente alterado de iron-list para outra coisa - precisa ser decidido).