編寫v1嵌套的web組件

Question

我是webcomponents的新手。由於webcomponents v1是可用的，我從那裏開始。我已經閱讀了關於他們網絡的各種帖子。我特別感興趣的是正確編寫它們。我已經閱讀了有關插槽並讓它們工作，儘管我的努力並沒有導致按我期望的方式工作的插槽web組件。

如果我有創作嵌套的Web組件這樣，從嵌套/開槽WebComponent的DOM不會得到插入父的插槽：

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

而這裏的父WebComponent的HTML：

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

由於每個WebComponent的（父和子）被寫入到是獨立的，我已與創建它們：

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

所得DOM包括2陰影根。我試圖編寫沒有陰影dom的子/開槽元素，這也不會導致父主管dom託管孩子。

那麼，構建v1嵌套webcomponents的正確方法是什麼？

Answer 1

首先，您必須使用a browser that implements Shadow DOM and Custom Elements v1。

然後調用attachShadow()將自動將新的Shadow DOM分配給read-only屬性shadowRoot。

您可以將HTML代碼附加到Shadow DOM的innerHTML，但我建議使用<template>的content屬性代替。

然後嵌套是很自然的：

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>

在<style>標籤，使用：

• :host的風格自定義元素本身，
• ::slotted()款式元素插入d與<slot>標籤。