Vaadin-combo-box: 样式组合框项目

有可用的解决方法吗？

因为外部样式不会渗透到 shadow DOM 中，所以需要在 shadow DOM 内部导入 CSS 文件。

也许这个 StackOverflow 线程有帮助。

根据该线程中的第二个答案， <link rel="stylesheet">应该在 shadow DOM 内工作。 所以这样的事情可以在你的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，您是否设法通过使用其中一种方法或其他方式使其工作？ 我很想听听。 :)

我尝试了你的第二个建议，它奏效了。 我没有尝试第一种方法。 但是，我尝试将“ @import ...”添加到我的 shared-styles.html 中

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

但这没有用。

因此，该问题有一个解决方法，但与 ListItems 相比，IMO 仍然存在与行为不一致的地方。

很高兴听到至少一种方法有效！

关于您的共享样式方法：您应该设置theme-for="vaadin-combo-box-item" ，因为这是样式应该注入的元素。 但是，它可能仍然无法与ComponentRenderer ，因为此渲染器在vaadin-combo-box-item和您添加的组件之间创建了额外的 Web 组件（以及 shadow-root）。

项目的样式以及它们是否应该在 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组件的。
我们应该在新的文档站点中记录 shadow DOM 和外部 CSS 的限制。

否则我们在这里无事可做。 所以让我关闭它，因为它不是一个错误。

我仍然希望组合框项目不应该放在 shadow DOM 中，而应该放在单独的插槽中。

组合框项目不应放置在 shadow DOM 中，而应放置在单独的插槽中。

我们可以将其视为下一个主要版本中潜在的重大更改。

暴露项目需要以它们与虚拟滚动组件一起工作的方式完成（这肯定会从iron-list更改为其他内容 - 必须决定）。