Composing v1 verschachtelte Web-Komponenten

Question

Ich bin neu bei Webkomponenten. Da v1 der webcomponents verfügbar ist, fange ich dort an. Ich habe verschiedene Beiträge im Internet gelesen. Ich bin besonders daran interessiert, sie richtig zu komponieren. Ich habe über Slots gelesen und lasse sie funktionieren, obwohl meine Bemühungen nicht zu geschlitzten Webkomponenten geführt haben, die so funktionieren, wie ich es erwartet habe.

Wenn ich Komponenten verschachtelte Web wie diese haben zu komponieren, das DOM aus dem verschachtelten/geschlitzten webcomponent nicht in den Schlitz des Mutter eingeführt bekommt:

<parent-component> 
 
    <child-component slot="child"></child-component> 
 
</parent-component>

Und hier ist die Mutter webcomponent HTML:

<div id="civ"> 
 
    <style> 
 
    </style> 
 
    <slot id="slot1" name="child"></slot> 
 
</div>

Da jeder webcomponent (Eltern und Kind) geschrieben wird, unabhängig zu sein, habe ich sie mit der Erstellung:

customElements.define('component-name', class extends HTMLElement { 
 
    constructor() { 
 
    super(); 
 
    this.shadowRoot = this.attachShadow({mode: 'open'}); 
 
    this.shadowRoot.innterHTML = `HTML markup` 
 
    } 
 
})

Die resultierende DOM enthält zwei Schatten Wurzeln. Ich habe versucht, child/slotted Elemente ohne Schatten dom zu schreiben, die auch nicht zum übergeordneten Schatten dom führt, der die Kinder bewirtet.

Also, was ist der richtige Weg, um v1 verschachtelte Webkomponenten zu komponieren?

Answer 1

Zuerst müssen Sie a browser that implements Shadow DOM and Custom Elements v1 verwenden.

Anschließend wird der neue Shadow-DOM automatisch dem read-only-Objekt shadowRoot durch den Aufruf an attachShadow() zugewiesen.

Sie können den HTML-Code an die Shadow DOMs innerHTML anhängen, aber ich würde stattdessen eine <template> 's content Eigenschaft empfehlen.

Dann Verschachtelung ist natürlich:

customElements.define('parent-component', class extends HTMLElement { 
 
    constructor() { 
 
     super() 
 
     this.attachShadow({mode: 'open'}) 
 
     this.shadowRoot.appendChild(parent1.content.cloneNode(true)) 
 
    } 
 
}) 
 
      
 
customElements.define('child-component', class extends HTMLElement { 
 
    constructor() { 
 
     super() 
 
     var sh = this.attachShadow({mode: 'open'}) 
 
     sh.appendChild(child1.content.cloneNode(true)) 
 
    } 
 
})

<parent-component> 
 
    <child-component slot="child"> 
 
     <span>Hello</span> 
 
    </child-component> 
 
</parent-component> 
 

 

 
<template id="parent1"> 
 
    <style> 
 
     :host { background: lightblue ; display: inline-block } 
 
     ::slotted([slot=child]) { background: lightyellow } 
 
    </style> 
 
    <h4>(parent)</h4> 
 
    <p>Slotted child: 
 
     <slot name="child"></slot> 
 
    </p> 
 
</template>  
 

 
<template id="child1"> 
 
    <style> 
 
     :host { display: inline-block } 
 
     ::slotted(span) { background: pink } 
 
    </style> 
 
    <h5>(child)</h5> 
 
    <span>Nested slot: <slot></slot></span> 
 
</template>

In den <style>-Tags verwenden:

• :host das benutzerdefinierte Element, um Stil selbst und
• ::slotted() zu Stil die Elemente einfügen d mit einem <slot> Tag.