javascript - 样式化嵌套的 Shadow DOM

Question

现在，我正在尝试在vaadin-combo-box. 我在自定义 Web 组件中使用 vaadin Web 组件。目前，我可以vaadin-text-field使用以下 CSS 设置样式：

vaadin-text-field::part(text-field) { ... }

但是，我无法进入嵌套的阴影根并使用该input-field部分设置突出显示的 div 的样式。

是否有解决该问题的方法或不可能？

标签： javascriptcssdomweb-componentshadow-dom

Answer 1

对于您的用例，我将使用themeFor="vaadin-text-field"内部@CssImport并使用主题（及其传播到子组件的功能，请参阅https://vaadin.com/docs/v14/flow/styling/styling-components/#sub-components）风格它像：

input-field[theme~="my-theme"] { }

不确定是否::part()能够进入嵌套的影子 DOM，但我会尝试：

vaadin-text-field::part(text-field)::part(input-field) {}

vaadin-text-field::part(input-field) {}