बनाम v1 नेस्टेड वेब घटक

Question

मैं वेबकंपोनेंट्स के लिए नया हूं। चूंकि वेबकंपोनेंट्स का v1 उपलब्ध है, इसलिए मैं वहां से शुरू कर रहा हूं। मैंने उनके बारे में वेब के चारों ओर विभिन्न पोस्ट पढ़ी हैं। मैं विशेष रूप से उन्हें सही ढंग से लिखने में रूचि रखता हूं। मैंने स्लॉट्स के बारे में पढ़ा है और उन्हें काम कर रहा है, हालांकि मेरे प्रयासों ने वेबकंपोनेंट्स को स्लॉट नहीं किया है जो मुझे अपेक्षित तरीके से काम करते हैं।

मैं इस तरह नेस्टेड वेब घटक रचना है, तो नेस्टेड/slotted webcomponent से डोम माता पिता की स्लॉट में डाला नहीं प्राप्त करता है:

<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` 
 
    } 
 
})

जिसके परिणामस्वरूप डोम 2 छाया जड़ों भी शामिल है। मैंने शैडो डोम के बिना बच्चे/स्लॉट किए गए तत्वों को लिखने का प्रयास किया है, जिसके परिणामस्वरूप मूल छाया डोम बच्चों को होस्ट नहीं करता है।

तो, v1 नेस्टेड वेबकंपोनेंट लिखने का सही तरीका क्या है?

Answer 1

सबसे पहले, आपको a browser that implements Shadow DOM and Custom Elements v1 का उपयोग करना होगा।

फिर attachShadow() पर कॉल read-only संपत्ति shadowRoot पर स्वचालित रूप से नया छाया डोम असाइन करेगा।

आप छाया डोम के 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() शैली के लिए तत्वों को सम्मिलित करें <slot> टैग के साथ डी।