不使用Shadow DOM的Web Component插槽失效问题及替代方案咨询

尝试不使用Shadow DOM构建Web Component，目前大部分功能正常，但想要实现类似Angular中@ViewChild/@ViewChildren的组件嵌套功能（使用渲染库uhtml，类似lit-html）。

现有Dropdown组件代码：

export class Dropdown extends HTMLElement {

    private open: boolean = false;

    static observedAttributes = ["open"]

    constructor() {
        super();
    }

    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
        switch (name) {
            case "open":
                this.open = Boolean(newValue);
                break;
        }
        this.display()
    }

    connectedCallback() {
        this.display()
    }

    display = () => {
        render(this, html`
            <div>
                <slot name="item">

                </slot>
            </div>
        `)
    }

    static register = () => customElements.define("my-dropdown", Dropdown)

}

使用方式：

Dropdown.register();


render(document.body, html`
    <my-dropdown open="true">
        <strong slot="item">test</strong>
    </my-dropdown>

`)

期望渲染结果：

<my-dropdown>
    <div>
        <strong>test</strong>
    </div>
</my-dropdown>

但插槽无法正常工作，切换到Shadow DOM后功能正常，但需要处理样式沙箱问题，希望避免。

请问：

1. 是否可以在不使用Shadow DOM的情况下让插槽生效？
2. 如果不行，有没有其他方式获取组件内部定义的内容并在display方法中使用？例如：
   输入：

<my-component>
    <div>some content here</div>
</my-component>

期望渲染为：

<my-component>
    <header>
        random header
    </header>
    <section>
        <!-- my custom content -->
        <div>some content here</div>
    </section>
</my-component>

1. 不使用Shadow DOM能否让原生插槽生效？ #

不行。原生Web Component的<slot>是Shadow DOM专属特性，只有在Shadow Root内部使用时，浏览器才会自动完成组件子节点的分发逻辑。在普通Light DOM（不使用Shadow DOM的组件内部）中，<slot>只是一个普通HTML元素，没有任何特殊行为。

2. 替代方案：手动处理组件子内容 #

既然无法依赖原生插槽，需要手动读取组件子节点，再插入到渲染模板的指定位置，结合uhtml特性可以这样实现：

方案一：手动收集具名子节点（适配Dropdown场景） #

筛选出带slot="item"属性的子元素，渲染时插入到模板对应位置：

export class Dropdown extends HTMLElement {
    private open: boolean = false;
    static observedAttributes = ["open"];

    constructor() {
        super();
    }

    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
        if (name === "open") {
            this.open = Boolean(newValue);
        }
        this.display();
    }

    connectedCallback() {
        this.display();
    }

    display = () => {
        // 手动收集slot="item"的子元素
        const slotItems = Array.from(this.querySelectorAll('[slot="item"]'));
        // 渲染时插入到指定位置
        render(this, html`
            <div>
                ${slotItems.map(item => item)}
            </div>
        `);
    }

    static register = () => customElements.define("my-dropdown", Dropdown);
}

方案二：重组织子节点结构（适配自定义组件场景） #

保存组件原始子节点，将其嵌入到新的模板结构中：

export class MyComponent extends HTMLElement {
    connectedCallback() {
        this.display();
    }

    display = () => {
        // 保存当前所有子节点
        const children = Array.from(this.childNodes);
        // 渲染新结构并插入子节点
        render(this, html`
            <header>
                random header
            </header>
            <section>
                ${children.map(child => child)}
            </section>
        `);
    }

    static register = () => customElements.define("my-component", MyComponent);
}

注意事项 #

• 若需处理动态更新的子节点，可监听DOMNodeInserted/DOMNodeRemoved事件，或在组件的属性变更、自定义方法中重新触发渲染。
• 手动操作节点时，需留意避免重复挂载问题（uhtml自带DOM diff，但仍需注意节点引用的处理）。
• 类似@ViewChild的功能，可通过this.querySelector/this.querySelectorAll获取组件内部特定元素并保存引用。

内容的提问来源于stack exchange，提问作者Jan Vladimir Mostert