JavaScript
कस्टम तत्व

वाक्य - विन्यास

• .prototype.createdCallback ()
• .prototype.attachedCallback ()
• .prototype.detachedCallback ()
• .prototyp.attributeChangedCallback (नाम, पुरानेवैल्यू, न्यूवैल्यू)
• document.registerElement (नाम, [विकल्प])

पैरामीटर

टिप्पणियों

नए तत्वों का पंजीकरण

परिभाषित करता है एक <initially-hidden> कस्टम तत्व जो अपनी सामग्री को तब तक छुपाता है जब तक कि निर्दिष्ट सेकंड समाप्त न हो जाए।

const InitiallyHiddenElement = document.registerElement('initially-hidden', class extends HTMLElement {
  createdCallback() {
    this.revealTimeoutId = null;
  }

  attachedCallback() {
    const seconds = Number(this.getAttribute('for'));
    this.style.display = 'none';
    this.revealTimeoutId = setTimeout(() => {
      this.style.display = 'block';
    }, seconds * 1000);
  }

  detachedCallback() {
    if (this.revealTimeoutId) {
      clearTimeout(this.revealTimeoutId);
      this.revealTimeoutId = null;
    }
  }
});

<initially-hidden for="2">Hello</initially-hidden>
<initially-hidden for="5">World</initially-hidden>

मूल तत्वों का विस्तार

देशी तत्वों को सीमित करना संभव है, लेकिन उनके वंशजों को अपने स्वयं के टैग नाम नहीं मिलते हैं। इसके बजाय, is विशेषता है जो उपवर्ग एक तत्व उपयोग माना जाता है निर्दिष्ट करने के लिए प्रयोग किया जाता है। उदाहरण के लिए, यहां <img> तत्व का विस्तार है जो लोड होने पर कंसोल को संदेश भेजता है।

const prototype = Object.create(HTMLImageElement.prototype);
prototype.createdCallback = function() {
  this.addEventListener('load', event => {
      console.log("Image loaded successfully.");
  });
};

document.registerElement('ex-image', { extends: 'img', prototype: prototype });

<img is="ex-image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" />