Vaadin-combo-box: Стилизация элементов поля со списком

Есть ли обходной путь?

Поскольку внешние стили не проникают в теневую DOM, вам необходимо импортировать файл CSS внутри теневой DOM.

Может быть, эта ветка StackOverflow поможет.

Основываясь на втором ответе в этом потоке, <link rel="stylesheet"> должен работать внутри теневой 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.

Приятно слышать, что хотя бы один подход работает!

О подходе с использованием общих стилей: вы должны установить theme-for="vaadin-combo-box-item" , поскольку это элемент, в который должны быть внедрены стили. Однако он может по-прежнему не работать с ComponentRenderer , потому что это средство визуализации создает дополнительный веб-компонент (и, следовательно, теневой корень) между vaadin-combo-box-item и вашими добавленными компонентами.

Возможность стилизации элементов и то, должны ли они находиться внутри теневой модели DOM, имеет отношение к веб-компоненту (этот репозиторий включает только оболочку 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 .
Мы должны задокументировать ограничения теневого DOM и внешнего CSS на новом сайте документации.

Иначе нам здесь нечего делать. Так что позвольте мне закрыть это, поскольку это не ошибка.

Я все равно ожидал бы, что элементы поля со списком следует размещать не в теневой DOM, а в отдельных слотах.

элементы поля со списком следует размещать не в теневом DOM, а в отдельных слотах.

Мы можем рассматривать это как потенциальное критическое изменение в следующем крупном выпуске.

Отображение элементов должно выполняться таким образом, чтобы они работали с компонентом виртуального скроллера (который определенно будет изменен с iron-list на что-то другое - необходимо решить).