कस्टम एलिमेंट के लिए सबसे सही तरीके

कस्टम एलिमेंट की मदद से, अपने एचटीएमएल टैग बनाए जा सकते हैं. इस चेकलिस्ट में, अच्छी क्वालिटी के एलिमेंट बनाने के सबसे सही तरीकों के बारे में बताया गया है.

कस्टम एलिमेंट की मदद से, एचटीएमएल का दायरा बढ़ाया जा सकता है और अपने टैग तय किए जा सकते हैं. ये हैं लेकिन यह सुविधा शानदार है, लेकिन ये बेहद निचले लेवल की भी हैं. इसका मतलब यह है कि यह हमेशा साफ़ तौर पर बताना होगा कि आपके एलिमेंट को सबसे अच्छे तरीके से कैसे लागू किया जाए.

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

चेकलिस्ट

शैडो डीओएम

एट्रिब्यूट और प्रॉपर्टी

इवेंट

एक्सप्लेनर (ज़्यादा जानकारी देने वाले वीडियो)

पेज लेखक को ओवरराइड न करें

यह मुमकिन है कि आपके एलिमेंट का इस्तेमाल करने वाला डेवलपर, इनमें से कुछ चीज़ों को बदलना चाहे उसकी शुरुआती स्थिति. उदाहरण के लिए, उसके ARIA role या फ़ोकस करने की क्षमता को बदलकर, tabindex. देखें कि क्या ये और कोई दूसरे ग्लोबल एट्रिब्यूट सेट किए गए हैं, अपनी वैल्यू लागू करने से पहले.

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

प्रॉपर्टी को लेज़ी बनाएं

डेवलपर आपके एलिमेंट पर प्रॉपर्टी सेट करने से पहले, परिभाषा लोड कर दी गई है. यह खास तौर पर तब सही होता है, जब डेवलपर फ़्रेमवर्क जो लोडिंग कॉम्पोनेंट, उन्हें पेज में इंसर्ट करता है, और बाइंडिंग करते हैं.

नीचे दिए गए उदाहरण में, Angular अपने मॉडल के isChecked प्रॉपर्टी को चेकबॉक्स की checked प्रॉपर्टी में बदलें. अगर कैसे-चेकबॉक्स लेज़ी लोड हुआ था, हो सकता है कि Angular सेट करने की कोशिश करे प्रॉपर्टी को अपग्रेड करने से पहले, उसे सही का निशान लगाकर चुना जा सकता है.

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

कस्टम एलिमेंट को इस स्थिति को हैंडल करना चाहिए. इसके लिए, यह जांचना ज़रूरी है कि किसी प्रॉपर्टी में पहले से ही इस इंस्टेंस पर सेट हो. <howto-checkbox> इस पैटर्न को दिखाने के लिए, _upgradeProperty() नाम वाले तरीके का इस्तेमाल किया जाता है.

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

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

बार-बार होने वाली समस्याओं से बचना

अपने कारोबार की मौजूदा ज़रूरतों को पूरा करने के लिए, attributeChangedCallback() का इस्तेमाल प्रॉपर्टी का इस्तेमाल किया जा सकता है, उदाहरण के लिए:

// When the [checked] attribute changes, set the checked property to match.
attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'checked')
    this.checked = newValue;
}

हालांकि, अगर प्रॉपर्टी सेटर एट्रिब्यूट की वैल्यू सबमिट करें.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    // OOPS! This will cause an infinite loop because it triggers the
    // attributeChangedCallback() which then sets this property again.
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

एक विकल्प यह है कि प्रॉपर्टी सेटर को एट्रिब्यूट को दिखाने की अनुमति दी जाए और गैटर से विशेषता के आधार पर उसकी वैल्यू तय करने के लिए कहा जाता है.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

इस उदाहरण में, एट्रिब्यूट जोड़ने या हटाने से प्रॉपर्टी भी सेट हो जाएगी.

आखिर में, खराब असर को ठीक करने के लिए, attributeChangedCallback() का इस्तेमाल किया जा सकता है जैसे कि ARIA स्टेटस लागू करना.

attributeChangedCallback(name, oldValue, newValue) {
  const hasValue = newValue !== null;
  switch (name) {
    case 'checked':
      // Note the attributeChangedCallback is only handling the *side effects*
      // of setting the attribute.
      this.setAttribute('aria-checked', hasValue);
      break;
    ...
  }
}