Verwendung von Slots in WebComponents ohne Verwendung von Shadow DOM

Question

Ich versuche, eine WebComponent zu erstellen, ohne ShadowDOM zu verwenden – bisher funktioniert es im Grunde nur, aber jetzt möchte ich eine Komponente erstellen, die andere Komponenten umschließt, wie z. B. mit Angular @ViewChild / @ViewChildren. (Die Bibliothek, die ich hier zum Rendern verwende, ist uhtl, ähnlich wie lit-html)

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)

}

Wenn ich diese Komponente jetzt verwende

Dropdown.register();


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

`)

Ich freue mich darauf, es zu sehen

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

Aber der Slot-Teil funktioniert nicht.

Wenn ich zu ShadowDOM wechsle, funktioniert es, aber jetzt muss ich mich mit dem Sandboxing von ShadowDOM herumschlagen und das möchte ich nicht.

constructor() {
    super();
    this.attachShadow({mode: "open"})
}

display = () => {
    render(this.shadowRoot as Node, html`

Ist es möglich, Slots ohne ShadowDOM zum Laufen zu bringen? Wenn nicht, gibt es eine andere Möglichkeit, die Definitionen in der Komponente abzurufen und in der Anzeige zu verwenden?

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

sollte als

gerendert werden

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

Irgendwelche Vorschläge?

Answer 1

不，<slot> 是 ShadowDOM API 的一部分

你可以伪造它，但由于没有shadowDOM，你必须将该内容存储在其他地方。
可能是您读取并解析（轻）DOM 内容的 <template> 。

这是一堆 DOM 突变。
学习使用 ShadowDOM 样式可能会更容易：

• CSS 属性
• 可继承的样式
• ::部分
• 可构造的样式表