Utiliser des emplacements dans WebComponents sans utiliser Shadow DOM

Question

J'essaie de créer un composant Web sans utiliser ShadowDOM - jusqu'à présent, cela fonctionne simplement, mais maintenant je veux créer un composant qui enveloppe d'autres composants, comme en utilisant Angular @ViewChild / @ViewChildren. (La bibliothèque que j'utilise pour le rendu ici est uhtl, similaire à 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)

}

Si j'utilise ce composant maintenant

Dropdown.register();


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

`)

J'ai hâte de le voir

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

Mais la partie slot ne fonctionne pas.

Si je passe à ShadowDOM, cela fonctionne, mais maintenant je dois gérer le sandboxing de ShadowDOM et je ne veux pas faire ça.

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

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

Est-il possible de faire fonctionner les machines à sous sans ShadowDOM ? Sinon, existe-t-il un autre moyen d'obtenir ce qui est défini à l'intérieur du composant et de l'utiliser dans l'affichage ?

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

devrait être rendu comme

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

Des suggestions ?

Answer 1

Non, <slot> fait partie de l'API ShadowDOM

Vous pouvez faire semblant, mais comme il n'y a pas de shadowDOM, vous devez stocker ce contenu ailleurs.
Probablement votre <template> qui lit et analyse le contenu (léger) du DOM.

Il s'agit d'un tas de mutations DOM.
Apprendre à utiliser le style ShadowDOM pourrait être plus facile :

• Propriétés CSS
• Styles hérités
• ::Partie
• Feuilles de style constructibles