如何在不使用Shadow DOM的简单HTMLElement中使用Slots？

核心原因 #

<slot>是Shadow DOM专属的内容分发机制，浏览器只有在自定义元素关联了Shadow Root时，才会自动识别并处理带有slot属性的子元素，将它们插入到对应的<slot>标签位置。不使用Shadow DOM的情况下，<slot>标签只会作为普通HTML元素存在，不会触发任何内容分发逻辑。

替代实现方案 #

既然不想用Shadow DOM，我们可以手动实现类似slot的内容分发逻辑，步骤如下：

1. 在自定义元素的模板中，用带标识的普通元素替代<slot>（比如用data-slot属性标记占位容器）
2. 在connectedCallback生命周期钩子中，手动将外部带slot属性的子元素移动到对应的占位容器中

完整代码示例 #

自定义元素定义

customElements.define('my-card', class extends HTMLElement {
    constructor() {
        super();
        // 用data-slot标记占位容器，替代原生slot
        this.innerHTML = `
            <div>
                <div data-slot="title"></div>               
            </div>`;
    }

    connectedCallback() {
        // 遍历所有带slot属性的子元素
        this.querySelectorAll('[slot]').forEach(slotChild => {
            const targetSlotName = slotChild.getAttribute('slot');
            // 找到对应的占位容器
            const targetContainer = this.querySelector(`[data-slot="${targetSlotName}"]`);
            if (targetContainer) {
                // 将子元素移动到容器内
                targetContainer.appendChild(slotChild);
            }
        });
    }
});

使用方式

<my-card>
    <div slot="title">Some title</div>
</my-card>

扩展说明 #

• 如果需要支持动态添加slot子元素，可以在自定义元素中监听DOMNodeInserted事件，在新元素插入时重复执行上述分发逻辑
• connectedCallback会在元素插入DOM时触发，适合处理静态内容的分发；如果元素被多次插入/移除DOM，可添加防抖逻辑避免重复处理

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