使用Declarative Shadow DOM封装页面头部，按钮样式未生效求助

Shadow DOM 存在严格的样式隔离机制：你写在 Shadow Root 内部的 .button 样式，仅能作用于 Shadow 树原生内部元素，而通过 <slot> 分发进来的按钮属于外部 Light DOM（即 <host-element> 直接包含的内容），不在 Shadow 样式的作用范围内，因此样式无法生效。

要给 Slot 分发的元素设置样式，需使用 Shadow DOM 提供的 ::slotted() 伪元素选择器，它专门用于选中被分发到 Slot 中的 Light DOM 元素。修改后的代码如下：

<host-element>
    <template shadowrootmode="open">
        <style>
            ::slotted(.button) {
                background-color: green;
            }
        </style>
        <slot></slot>
    </template>
    <div>
        <div class="button">Button one</div>
        <div class="button">Button two</div>
    </div>
</host-element>

• ::slotted() 可以精准匹配分发元素的选择器（类、标签等），也可用 ::slotted(*) 选中所有 Slot 分发的元素，但推荐按需指定选择器，避免不必要的样式污染。
• 注意：::slotted() 无法穿透嵌套元素进行深层选择（如 ::slotted(div .button) 这类写法无效），它仅能直接匹配被分发到 Slot 中的顶级元素或其直接带有的类/属性。

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