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, 이러한 접근 방식 중 하나 또는 다른 방법을 사용하여 작동하도록 관리했습니까? 듣고 싶습니다. :)

나는 당신의 두 번째 제안을 시도했고 효과가 있었습니다. 나는 첫 번째 접근을 시도하지 않았다. 그러나 내 shared-styles.html에 " @import ..."를 추가하려고 했습니다.

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

하지만 작동하지 않았습니다.

따라서 이 문제에 대한 해결 방법을 사용할 수 있지만 IMO에는 여전히 ListItem과 대조적으로 bahavior와 일치하지 않는 것이 있습니다.

적어도 하나의 접근 방식이 효과가 있다는 소식을 듣는 것이 좋습니다!

공유 스타일 접근 방식에 대해: theme-for="vaadin-combo-box-item" 설정해야 합니다. 왜냐하면 이것이 스타일이 삽입되어야 하는 요소이기 때문입니다. 그러나 이 렌더러는 vaadin-combo-box-item 와 추가된 구성 요소 사이에 추가 웹 구성 요소(따라서 섀도우 루트)를 생성하기 때문에 ComponentRenderer 에서는 여전히 작동하지 않을 수 있습니다.

항목의 스타일성 및 항목이 Shadow 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 구성 요소에만 국한되지 않습니다.
새 문서 사이트에서 shadow DOM 및 외부 CSS의 제한 사항을 문서화해야 합니다.

그렇지 않으면 여기에서 우리가 할 일이 없습니다. 버그가 아니므로 닫겠습니다.

나는 여전히 콤보 상자 항목이 shadow DOM 내에 배치되지 않고 별도의 슬롯에 배치되어야 한다고 예상합니다.

콤보 상자 항목은 shadow DOM 내에 배치되지 않고 별도의 슬롯에 배치되어야 합니다.

이것은 다음 주요 릴리스에서 잠재적인 주요 변경 사항으로 간주할 수 있습니다.

항목을 노출하는 것은 가상 스크롤러 구성 요소와 함께 작동하는 방식으로 수행되어야 합니다( iron-list 에서 다른 것으로 확실히 변경됨 - 결정해야 함).