👩🏼‍⚕️ 🏪 👩🏿‍🚀 शैडो डोम के बिना वेब घटक 💑 🤟🏾 🥡

हेलो, हेब्र!

हाल ही में, मैंने कई तरह के वेब घटकों की आलोचना करते हुए कई लेखों को देखा। कभी-कभी, यह आलोचना बहुत कठोर होती है और यहां तक कि घृणा के भाव भी। मेरी राय में, यहां मुख्य समस्या डेवलपर समुदाय के बीच मानकों के इस समूह के साथ काम करने के स्थापित अभ्यास की कमी है। कई परिचित मॉडल हमेशा कस्टम तत्वों और शैडो डोम से जुड़ी परियोजनाओं में व्यवस्थित रूप से फिट नहीं होते हैं , कई चीजों को एक नए कोण से देखा जाना चाहिए, और हर कोई इसे पसंद नहीं करता है। मैं कई वर्षों से वेब घटकों के साथ सफलतापूर्वक काम कर रहा हूं और यहां तक कि अपनी खुद की लाइब्रेरी भी विकसित कर रहा हूंउनके आधार पर, इसलिए मुझे लगता है कि यह स्थिति बहुत उचित नहीं है। मैं कम से कम आंशिक रूप से, इसे ठीक करने की कोशिश करूंगा, अपनी मामूली ताकत की सीमा तक। मैंने कॉम्पैक्ट प्रकाशनों की एक श्रृंखला बनाने का फैसला किया, जिनमें से प्रत्येक में मैं आलोचना के लगातार पहलुओं में से एक पर छूने की योजना बना रहा हूं, साथ ही साथ कई तकनीकी तकनीकों का प्रदर्शन करना चाहता हूं जो उन लोगों के लिए दिलचस्प हो सकते हैं जिन्होंने अभी तक यह तय नहीं किया है कि वह किस पक्ष के बैरिकेट पर होना चाहिए। आज मैं छाया डोम के बिना घटकों को बनाने के बारे में बात करना चाहूंगा।

किस लिए?

मुख्य विचार जो मैं इस बार बताना चाहता हूं वह यह है कि वेब घटक और शैडो डोम एक ही बात नहीं हैं । शैडो डोम का उपयोग करते समय, आपको दो मुख्य लाभ मिलते हैं:

दस्तावेज़ का एक अलग खंड जिसमें आपकी शैली बाहरी प्रभावों और "लीक" से सुरक्षित महसूस करती है
एक संरचनागत तंत्र जो आपको दस्तावेज़ को घटक की संरचना और उसकी सामग्री (पेड़ में DOM तत्व के वंशज) में विभाजित करने की अनुमति देता है

हालांकि, यह मैकेनिक एक अलग जगह बनाने और स्टाइल करने के लिए कुछ लागत भी वहन करता है, जो काफी स्वाभाविक है। कुछ मामलों में (बड़ी सूची, डेटा के साथ टेबल सेल आदि), मैं प्रदर्शन अनुकूलन के कारणों के लिए इन लागतों से बचना चाहता हूं। अब हम इसे ठीक करेंगे:

const MY_CSS = {
  title: 'color: #00f; font-size: 2em',
  item: 'color: #f00; font-size: 1.2em',
};

const DATA = [
  {text: 'Text 1'},
  {text: 'Text 2'},
  {text: 'Text 3'},
];

let template = document.createElement('template');
template.innerHTML = /*html*/ `
<div style="${MY_CSS_.title}">List items:</div>
<div class="my-list">
  ${DATA.map(item => /*html*/ `<div style="${MY_CSS.item}">${item.text}</div>`).join('')}
</div>
`;

class ShadowlessComponent extends HTMLElement {
  constructor() {
    super();
    this._contents = new DocumentFragment();
    this._contents.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {
    this.appendChild(this._contents);
  }
}

window.customElements.define('shadowless-component', ShadowlessComponent);

यदि आप पहले से ही कस्टम एलिमेंट्स मानक से परिचित हैं, तो आप तुरंत देखेंगे कि क्या हो रहा है: attachShadowघटक कंस्ट्रक्टर में विधि को कॉल करने के बजाय , हमने एक डॉक्यूमेंटफ्रेग्मेंट बनाया, जिसमें हमने पहले से तैयार किए गए टेम्पलेट को क्लोन किया। इस स्तर पर, घटक ब्राउज़र द्वारा प्रदान नहीं किया जाता है और इसे अपेक्षाकृत सुरक्षित रूप से संशोधित किया जा सकता है, उदाहरण के लिए, डेटा को बाँध / डालें।

अगला महत्वपूर्ण कदम कस्टम एलिमेंट्स जीवन चक्र से संबंधित है। घटक को पूरी तरह से काम करने के बाद और उस क्षण तक सामान्य दस्तावेज़ में घटक जोड़ दिए जाते हैं, DOM API का वह भाग जो तत्व के माता-पिता या वंशजों के साथ काम करने के लिए ज़िम्मेदार है, साथ ही विशेषताओं के साथ उपलब्ध नहीं होगा। इसलिए, हमारे घटक में सीधे सामग्री जोड़ने के लिए, हम उपयोग करते हैं connectedCallback।

टेम्पलेट बनाते समय, हमने सरलता के लिए विधि का उपयोग किया innerHTML। यह ऑपरेशन केवल एक बार किया जाता है, "टेम्पलेट" तत्व बनाते समय, यह हर बार दोहराया नहीं जाता है कि हमारे घटक का एक उदाहरण बनाया गया है। हालाँकि, इस बिंदु को और भी अनिवार्य रूप से पैटर्न बनाकर अनुकूलित किया जा सकता है।

कुल मिलाकर, हमारे मार्कअप में एक कस्टम टैग का उपयोग करके shadowless-component, हमें ब्राउज़र में निम्नलिखित परिणाम मिलते हैं:

<shadowless-component>
  <div id="caption" style="color: #00f; font-size: 2em">List items:</div>
    <div class="my-list">
      <div style="color: #f00; font-size: 1.2em">Text 1</div>
      <div style="color: #f00; font-size: 1.2em">Text 2</div>
      <div style="color: #f00; font-size: 1.2em">Text 3</div>
    </div>
</shadowless-component>

चूंकि, ShadowRoot से छुटकारा पाने के बाद, हमने शैलियों का अलगाव खो दिया, हमने विशेषता के उपयोग से अपने टेम्पलेट में शैलियों को जोड़ा। इस मामले में, उनकी प्राथमिकता है, यह आंशिक रूप से समस्या को हल करता है और महत्वपूर्ण स्थानों पर उपयोग किया जा सकता है। अन्य सभी मामलों के लिए, क्लासिक स्टाइल एक सामान्य स्टाइल शीट के माध्यम से उपलब्ध है, और कस्टम टैग सुविधाजनक चयनकर्ताओं के रूप में कार्य करते हैं।

प्रदर्शन: सामग्री

वेब घटक आपके DOM का पूर्ण नोड हैं। इसका मतलब है, इस तथ्य के अलावा कि डोम तत्वों के सभी मानक तरीके आपके लिए उपलब्ध हैं, और यह कि आपका घटक हमेशा एक प्रकार का कंटेनर होता है। यही है, यदि आप वेब घटक का उपयोग करके डोम में तत्वों की एक मनमाना संरचना जोड़ना चाहते हैं, तो वे सभी आपके घटक के वंशज होंगे, जो हमेशा सुविधाजनक नहीं होता है। ऐसे मामलों में, आप नए CSS नियम - प्रदर्शन: सामग्री का उपयोग कर सकते हैं । ब्राउज़र समर्थन: caniuse.com/#feat=css-display-contents

डिफ़ॉल्ट रूप से, सभी घटकों का प्रदर्शन होता है: इनलाइन संपत्ति ।

थोड़ी शरारत की

लेकिन क्या होगा अगर हम कोई अतिरिक्त कंटेनर और कस्टम टैग बिल्कुल नहीं चाहते हैं? शुद्ध HTML दें!

ठीक:

  constructor() {
    super();
    this._contents = new DocumentFragment();
    this._contents.appendChild(template.content.cloneNode(true));
    this._titleEl = this._contents.querySelector('#caption');
    window.setInterval(() => {
      this._titleEl.textContent = Date.now();
    }, 1000);
  }
  connectedCallback() {
    this.parentNode.prepend(this._contents, this);
    this.remove();
  }

परिणामस्वरूप, हमें यह मिलता है:

<div id="caption" style="color: #00f; font-size: 2em">1581075598392</div>
<div class="my-list">
  <div style="color: #f00; font-size: 1.2em">Text 1</div>
  <div style="color: #f00; font-size: 1.2em">Text 2</div>
  <div style="color: #f00; font-size: 1.2em">Text 3</div>
</div>

सभी घटनाएं और बाइंडिंग काम करना जारी रखती हैं और हमारे घटक द्वारा नियंत्रित होती हैं, जो अब केवल स्मृति में मौजूद हैं। इस मामले में, आपको उस समय कचरे से अनसब्सक्राइबर्स और अन्य सफाई का अतिरिक्त ध्यान रखना होगा जब आप घटक को पूरी तरह से निकालना चाहते हैं।

सीएसएस घटक

मानक के अनुसार, कस्टम टैग को "-" वर्ण के अनिवार्य जोड़ के साथ नामित किया जाना चाहिए। यदि आप मार्कअप में अपने टैग का उपयोग करते हैं, लेकिन उसी समय JS में कोई कंपोनेंट नहीं बनाते हैं और उसके कंस्ट्रक्टर को कंपोनेंट रजिस्ट्री में जोड़ते हैं, तो ब्राउज़र आपके टैग को "अज्ञात तत्व" ( HTMLUnognElement ) मानता है । डिफ़ॉल्ट रूप से, ये तत्व स्पैन टैग के व्यवहार में समान हैं। इसका उपयोग किया जा सकता है यदि आपको एक सरल संरचना के साथ एक सरल डंब घटक बनाने की आवश्यकता है जिसके लिए सीएसएस नियम :: पहले , :: बाद और एटर () अभिव्यक्तियां पर्याप्त हैं । उदाहरण:

  my-container {
    display: block;
    padding: 10px;
    border: 1px solid currentColor;
  }
  my-container::before {
    content: attr(caption);
    margin-bottom: .6em;
  }

मार्कअप में उपयोग करें:

<my-container caption=""></my-container>

शैडो डोम के बिना वेब घटक

किस लिए?

प्रदर्शन: सामग्री

थोड़ी शरारत की

सीएसएस घटक

More articles: