如何为带Shadow DOM的自定义元素的子元素设置样式？

你遇到的核心问题是Shadow DOM的样式隔离机制：自定义元素的light DOM子节点（也就是你写在<test-stack>里的<h3>、<p>等）并不在Shadow DOM内部，所以Shadow DOM里的:host > *选择器根本选不到它们。要实现需求，必须通过<slot>将light DOM内容引入Shadow DOM，再用::slotted()伪元素为这些分发的子元素设置样式。

具体解决方案 #

修改自定义元素的render方法，在Shadow DOM中添加<slot>标签（用于接收light DOM的子元素），并调整样式选择器为::slotted()：

class TestStack extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })
    }
    render() {
        this.shadowRoot.innerHTML = `
            <style>
                /* 设置自定义元素自身的Flex布局 */
                :host {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                }
                /* 为所有分发到slot的子元素清除默认margin */
                ::slotted(*) {
                    margin-block: 0;
                }
                /* 为相邻的分发子元素设置顶部间距（实现Stack的垂直间距效果） */
                ::slotted(* + *) {
                    margin-block-start: 2rem;
                }
            </style>
            <!-- 引入light DOM的子元素 -->
            <slot></slot>
        `
    }

    connectedCallback() {
        this.render()
    }
    attributeChangedCallback() {
        this.render()
    }
}
customElements.define('test-stack', TestStack)

原理说明 #

1. <slot>的作用：它是Shadow DOM和light DOM之间的桥梁，会把自定义元素标签内的所有子元素“分发”到Shadow DOM的对应位置。
2. ::slotted()伪元素：专门用于选择通过<slot>分发到Shadow DOM中的light DOM元素，支持相邻兄弟选择器（* + *）这类组合写法，刚好匹配你需要的Stack组件垂直间距需求。
3. :host选择器：依然负责自定义元素自身的样式，不受Shadow DOM隔离影响，可以正常设置Flex布局属性。

注意事项 #

• ::slotted()只能选中直接分发到slot的元素（也就是<test-stack>的直接子节点），无法选中这些子元素内部的后代节点，这是Shadow DOM样式隔离的限制。
• 如果不需要严格的样式隔离，也可以选择不使用Shadow DOM，但这样自定义元素的样式可能会和全局样式冲突，不推荐用于通用组件。

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