Komponowanie komponentów webowych zagnieżdżonych v1

Question

Jestem nowy dla komponentów sieciowych. Ponieważ v1 komponentów sieciowych jest dostępny, zaczynam tam. Czytałem różne posty w Internecie na ich temat. Jestem szczególnie zainteresowany ich prawidłowym komponowaniem. Czytałem o automatach i pracowałem, chociaż moje wysiłki nie doprowadziły do ​​powstania szczelinowych komponentów sieciowych, które działają tak, jak się spodziewałem.

Jeśli mam komponować zagnieżdżone elementy internetowych, takich jak ten, DOM z zagnieżdżonego/szczelinowy webcomponent nie zostanie włożona do gniazda rodzica:

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

A oto rodzic webcomponent HTML:

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

Ponieważ każdy webcomponent (nadrzędny i dzieci) są zapisywane jako niezależny, jakie tworzy ich z:

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

Uzyskany DOM obejmuje 2 cień korzeni. Podjąłem próbę napisania elementów potomnych/cenzurowanych bez shadow house, co również nie skutkuje cieniem rodzica hostującego dzieci.

Jaki jest właściwy sposób komponowania komponentów webowych v1?

Answer 1

Najpierw należy użyć a browser that implements Shadow DOM and Custom Elements v1.

Następnie wywołanie attachShadow() spowoduje automatyczne przypisanie nowego DOM Cienia do read-only właściwości shadowRoot.

Możesz dodać kod HTML do DOM Cienia Cienia innerHTML, ale polecam zamiast tego użyć właściwości <template> 'content.

Następnie zagnieżdżenia jest naturalne:

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>

W <style> tagów, zastosowanie:

• :host projektować sam element niestandardowy, a
• ::slotted() do stylu elementy inserte dz znacznikiem <slot>.