样式化嵌套的 Shadow DOM

【问题标题】：Styling nested Shadow DOMs样式化嵌套的 Shadow DOM
【发布时间】：2021-06-20 08:23:18
【问题描述】：

现在，我正在尝试在vaadin-combo-box 的嵌套阴影 dom 中设置输入样式。我在自定义 Web 组件中使用 vaadin Web 组件。目前，我可以使用以下 CSS 设置 vaadin-text-field 的样式：

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

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

这个问题有解决方案还是不可能？

【问题讨论】：

【解决方案1】：

对于您的用例，我将在@CssImport 中使用themeFor="vaadin-text-field" 并使用主题（及其传播到子组件的功能，请参阅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) {}

【讨论】：