Vaadin 24 LitTemplate中插槽内按钮::part(label)样式失效问题

这是Shadow DOM的样式封装规则导致的，核心在于::slotted()选择器的限制和组件Shadow DOM的隔离特性：

• 模板内的vaadin-button：属于自定义组件自身Shadow DOM内部的元素，组件内的样式可以直接通过#headInfo选中该按钮，再通过::part(label)访问按钮自身Shadow DOM里的label部件——因为同一Shadow DOM上下文内的样式可以穿透内部组件的part接口。

• 插槽中的vaadin-button：属于外部传入的Light DOM元素，::slotted()选择器只能选中插槽元素本身（也就是vaadin-button这个外层元素），无法穿透到该按钮自己的Shadow DOM内部。Vaadin Button本身是独立的Shadow DOM组件，它的label部件是在自己的Shadow DOM里，而::slotted()的样式作用范围只到插槽元素的外层，没办法跨越两层Shadow DOM去访问内部的part。

举个直观的样式代码例子：

/* 有效：选中插槽内的按钮外层元素 */
::slotted(vaadin-button) {
  background: #ccc;
}

/* 无效：无法穿透到按钮自身Shadow DOM的label部件 */
::slotted(vaadin-button)::part(label) {
  color: red;
}

如果要给插槽内按钮的label设置样式，可行的方向包括：

• 在按钮所在的外部上下文（比如父页面或上层组件）中直接用vaadin-button::part(label)设置样式；
• 给插槽内的按钮添加自定义类名，在外部样式中通过.custom-btn::part(label)指定样式；
• 利用CSS变量传递样式，在自定义组件中定义变量，让插槽内的按钮继承并应用到label部件上。

内容的提问来源于stack exchange，提问作者herby3