HTML वेब घटक छाया डोम शैली का उपयोग नहीं करता है

Question

मैंने एक वेनिला वेब घटक या HTML तत्व बनाया है। यह सिर्फ दो लिंक प्रदर्शित करता है।

बात को एनकैप्सुलेट करने के लिए, मैं शैडो डोम का उपयोग करता हूं। हालाँकि यह इनकैप्सुलेटेड नहीं लगता है। DOM ट्री में यह # शैडो-रूट के अंदर है जो अच्छा है।

मेरे वेब घटक के लिए टेम्पलेट में प्रदान की गई शैली के बजाय वेब घटक वैश्विक शैली का उपयोग क्यों करता है?

पाठ लाल है और मुझे उम्मीद है कि यह हरा होगा।

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const template = `
      <style>
        a {
          color: green;
        }
      </style>
      <slot></slot>`;
    this.shadow.innerHTML = template;
  }
}

window.customElements.define("my-el", MyEl);

a {
  color: red
}

  <my-el>
    <a href="example.com">Item1</a>
    <a href="example.com">Item2</a>
  </my-el>

Answer 1

जबकि इस सवाल का पहले से ही एक स्वीकृत जवाब है, एक स्लॉट के बच्चों को शैरोड पर ले जाना ज्यादातर उपयोग के मामलों के लिए वांछनीय नहीं है।

आप शायद जो करना चाहते हैं, वह ::slotted()चयनकर्ता का उपयोग करना है ।

बस ध्यान रखें कि ::slotted()चयनकर्ता के माध्यम से एक स्लॉट के बच्चों पर लागू शैलियों केवल "डिफ़ॉल्ट" शैलियों के रूप में कार्य करती हैं और अभी भी लाइट डोम में शैलियों का उपयोग करके ओवरराइड किया जा सकता है।

उदाहरण के लिए, अपने स्निपेट के इस संपादित संस्करण की जाँच करें:

जैसा कि आप देख सकते हैं, यह समय my-elएंकर ( <a>) के किसी भी स्लॉट में बच्चों को रंग और पाठ-सजावट शैली दोनों को लागू करने की कोशिश करता है ।

हालांकि, हल्के डोम में, हमारे पास एक a.specialचयनकर्ता है जो रंग को ओवरराइड करता है, इसलिए <a class="special">इच्छा लाल होगी, हरा नहीं

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const template = `
      <style>
        ::slotted(a) {
          color: green;
          text-decoration: none;
        }
      </style>
      <slot></slot>`;
    this.shadow.innerHTML = template;
  }
}

window.customElements.define("my-el", MyEl);

a.special {
  color: red
}

  <my-el>
    <a href="example.com">Item1</a>
    <a class="special" href="example.com">Item2</a>
  </my-el>

Answer 2

पूर्ण, विस्तृत विवरण इस प्रकार है: :: छायाकार स्लॉट में नेस्टेड बच्चों के लिए slotted सीएसएस चयनकर्ता

टीएल, डॉ

आपके लिंक lightDOM में हैं और इस प्रकार इसके DOM (आपके कोड में दस्तावेज़ DOM) द्वारा स्टाइल किया
गया है, lightDOM से छाया में नोड्स को स्थानांतरित करना एक "समाधान" है; लेकिन आप तब स्लॉट्स का उपयोग नहीं कर रहे हैं।

FYI करें, आपका कोड:

class MyEl extends HTMLElement {
  constructor() {
    super().attachShadow({ mode: "open" })
           .innerHTML = `<style>a{color:green}</style><slot></slot>`;

  }
}

window.customElements.define("my-el", MyEl);

---

अधिक SLOT संबंधित उत्तर StackOverflow Search: कस्टम एलिमेंट SLOT के साथ मिल सकते हैं

Answer 3

इस पंक्ति को देखें, आपको तत्वों को उदाहरण के लिए छाया में ले जाना / कॉपी करना है:

this.shadow.innerHTML = this.innerHTML + template;

मैंने इसे प्रदर्शित करने के लिए जोड़ा है कि केवल इनलाइन शैली को शैडो डोम तत्वों पर लागू किया जाएगा .. इसलिए कॉपी किए गए लिंक SD आपकी शैली का उपयोग कर रहे हैं :)

इतना लाल होगा GLOBAL, हराSHADOW तत्व होगा

class MyEl extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.shadow = this.attachShadow({ mode: "open" });
    const template = `
      <style>
        a {
          color: green;
        }
      </style>
      <slot></slot>`;
    this.shadow.innerHTML = this.innerHTML + template;
  }
}

window.customElements.define("my-el", MyEl);

a {
  color: red
}

<my-el>
    <a href="example.com">Item1</a>
    <a href="example.com">Item2</a>
  </my-el>