Menggunakan slot dalam WebComponent tanpa menggunakan Shadow DOM

Question

Saya cuba membina WebComponent tanpa menggunakan ShadowDOM - setakat ini pada dasarnya ia hanya berfungsi, tetapi sekarang saya mahu membina komponen yang membungkus komponen lain, seperti menggunakan Angular's @ViewChild / @ViewChildren. (Perpustakaan yang saya gunakan untuk rendering di sini ialah uhtl, serupa dengan 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)

}

Jika saya menggunakan komponen ini sekarang

Dropdown.register();


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

`)

Saya tidak sabar untuk melihatnya

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

Tetapi bahagian slot tidak berfungsi.

Jika saya bertukar kepada ShadowDOM ia berfungsi, tetapi sekarang saya perlu berurusan dengan kotak pasir ShadowDOM dan saya tidak mahu berbuat demikian.

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

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

Adakah mungkin untuk membuat slot berfungsi tanpa ShadowDOM? Jika tidak, adakah terdapat cara berbeza untuk mendapatkan apa yang ditakrifkan di dalam komponen dan menggunakannya di dalam paparan?

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

hendaklah diterjemahkan sebagai

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

Ada cadangan?

Answer 1

Tidak, <slot> adalah sebahagian daripada ShadowDOM API

Anda boleh memalsukannya, tetapi kerana tiada shadowDOM, anda perlu menyimpan kandungan itu di tempat lain.
Mungkin <template> anda yang membaca dan menghuraikan kandungan DOM (ringan).

Ini adalah sekumpulan mutasi DOM.
Belajar menggunakan penggayaan ShadowDOM mungkin lebih mudah:

• Ciri CSS
• Gaya yang boleh diwarisi
• ::Bahagian
• Lembaran gaya boleh dibina