如何通过JavaScript向Web Component的Slot插入元素

问题根源 #

你当前的错误在于：将创建的wc-bar元素添加到了Shadow DOM内部的<slot>元素中，而插槽(<slot>)的核心作用是投射自定义元素的Light DOM子节点（也就是<wc-foo>标签内部的元素）。Shadow DOM里的<slot>的子元素属于默认内容，只有当自定义元素没有对应Light DOM内容时才会显示，这类内容不会被::slotted(*)选择器匹配。

解决方案 #

要让元素被插槽接收并应用::slotted样式，需要将创建的元素添加到自定义元素本身的子节点（即Light DOM），而不是Shadow DOM里的<slot>元素中。

修改ComponentFoo的connectedCallback方法：

connectedCallback() {
    const bar = document.createElement("wc-bar");
    bar.textContent = "Bar created via Javascript";
    this.appendChild(bar); // 添加到自定义元素本身的子节点
    console.log(bar);
}

修改后的完整代码 #

JavaScript部分

class ComponentFoo extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        this.shadowRoot.appendChild(TEMPLATE_FOO.content.cloneNode(true));
    }
    connectedCallback() {
        const bar = document.createElement("wc-bar");
        bar.textContent = "Bar created via Javascript";
        this.appendChild(bar); // 修正：添加到自定义元素的Light DOM
        console.log(bar);
    }
};
window.customElements.define("wc-foo", ComponentFoo);

class ComponentBar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        this.shadowRoot.appendChild(TEMPLATE_BAR.content.cloneNode(true));
    }
};
window.customElements.define("wc-bar", ComponentBar);

HTML部分

<template id="TEMPLATE_FOO">
  <div>foo</div>
  <slot id="SLOT"></slot>
  <style>
    ::slotted(*) {
        color: red;
        border: 1px solid lime;
    }
  </style>
</template>

<template id="TEMPLATE_BAR">
  <div>bar</div>
</template>

<wc-foo>
    <div>bar created via HTML</div>
</wc-foo>

补充（命名插槽场景） #

如果使用命名插槽，需要给子元素设置slot属性指定对应的插槽名称：

// 假设TEMPLATE_FOO里有<slot name="content"></slot>
bar.setAttribute('slot', 'content');
this.appendChild(bar);

这样元素就会被正确投射到指定的命名插槽中，同时::slotted([slot="content"])之类的选择器也能匹配到它。

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