在 WebComponents 中使用槽而不使用 Shadow DOM

Question

我正在嘗試在不使用ShadowDOM 的情況下建立WebComponent - 到目前為止它基本上只是工作，但現在我想建立一個包裝其他元件的元件，就像使用Angular 的@ViewChild / @ViewChildren 一樣。 （我在這裡用來渲染的庫是uhtml，類似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)

}

如果我現在使用這個元件

Dropdown.register();


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

`)

我期待看到

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

但是插槽部分不起作用。

如果我切換到 ShadowDOM，它就可以工作，但現在我必須處理 ShadowDOM 的沙箱，而我不想這樣做。

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

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

是否可以在沒有 ShadowDOM 的情況下使插槽運作？ 如果沒有，是否有不同的方法來獲取組件內部定義的內容並在顯示內部使用它？

<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>

有什麼建議嗎？

Answer 1

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

你可以偽造它，但由於沒有shadowDOM，你必須將該內容儲存在其他地方。
可能是您讀取並解析（輕）DOM 內容的 <template> 。

這是一堆 DOM 突變。
學習使用 ShadowDOM 樣式可能會更容易：

• CSS 屬性
• 可繼承的樣式
• ::部分
• 可建構的樣式表