कस्टम एलिमेंट के साथ काम करना

Boris Smus

शुरुआती जानकारी

वेब पर अभिव्यक्ति की कमी है. मेरा मतलब जानने के लिए, किसी "मॉडर्न" वेब ऐप पर एक नज़र डालें, जैसे कि Gmail:

Gmail

<div> सूप के बारे में कुछ भी नया नहीं है. फिर भी, हमने इसी तरह वेब ऐप्लिकेशन बनाए हैं. यह दुख की बात है. क्या हमें अपने प्लैटफ़ॉर्म से ज़्यादा मांग नहीं करनी चाहिए?

सेक्सी मार्कअप. चलो, इसे कुछ खास बनाएं

एचटीएमएल हमें दस्तावेज़ बनाने के लिए एक बेहतरीन टूल देता है. हालांकि, इसकी शब्दावली, एचटीएमएल स्टैंडर्ड में बताए गए एलिमेंट तक ही सीमित है.

अगर Gmail के लिए मार्कअप क्रूर नहीं था, तो क्या होगा? अगर वह सुंदर होती, तो क्या होता:

<hangout-module>
    <hangout-chat from="Paul, Addy">
    <hangout-discussion>
        <hangout-message from="Paul" profile="profile.png"
            profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.
        <p>Heard of it?
        </hangout-message>
    </hangout-discussion>
    </hangout-chat>
    <hangout-chat>...</hangout-chat>
</hangout-module>

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

YouTube TV का इस्तेमाल शुरू करना

कस्टम एलिमेंट की मदद से वेब डेवलपर, नए तरह के एचटीएमएल एलिमेंट तय कर सकते हैं. यह स्पेसिफ़िकेशन, वेब कॉम्पोनेंट के तहत आने वाले कई नए एपीआई प्रिमिटिव में से एक है, लेकिन यह सबसे अहम है. कस्टम एलिमेंट से अनलॉक की गई सुविधाओं के बिना वेब कॉम्पोनेंट मौजूद नहीं होते:

  1. नए एचटीएमएल/DOM एलिमेंट तय करना
  2. ऐसे एलिमेंट बनाएं जो अन्य एलिमेंट से इंटिग्रेट किए गए हों
  3. तर्क के हिसाब से, कस्टम फ़ंक्शन को एक ही टैग में एक साथ रखें
  4. मौजूदा डीओएम एलिमेंट के एपीआई को बढ़ाएं

नए एलिमेंट रजिस्टर करना

कस्टम एलिमेंट बनाने के लिए, document.registerElement() का इस्तेमाल किया जाता है:

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

document.registerElement() का पहला आर्ग्युमेंट, एलिमेंट के टैग का नाम होता है. नाम में डैश (-) होना चाहिए. उदाहरण के लिए, <x-tags>, <my-element>, और <my-awesome-app> सभी मान्य नाम हैं, जबकि <tabs> और <foo_bar> नहीं हैं. इस पाबंदी की मदद से पार्सर, कस्टम एलिमेंट और सामान्य एलिमेंट में फ़र्क़ कर सकता है. साथ ही, यह पक्का करता है कि एचटीएमएल में नए टैग जोड़े जाने पर, उसे फ़ॉरवर्ड किया जा सके.

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

डिफ़ॉल्ट रूप से, कस्टम एलिमेंट HTMLElement से इनहेरिट किए जाते हैं. इसलिए, पिछला उदाहरण इसके बराबर है:

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

document.registerElement('x-foo') को कॉल करने से, ब्राउज़र को नए एलिमेंट के बारे में जानकारी मिलती है. साथ ही, यह एक कंस्ट्रक्टर दिखाता है, जिसका इस्तेमाल <x-foo> के इंस्टेंस बनाने के लिए किया जा सकता है. इसके अलावा, अगर आपको कंस्ट्रक्टर का इस्तेमाल नहीं करना है, तो इंस्टैंशिएट करने वाले एलिमेंट की दूसरी तकनीकों का इस्तेमाल करें.

एलिमेंट को बड़ा करना

कस्टम एलिमेंट की मदद से, मौजूदा (नेटिव) एचटीएमएल एलिमेंट के साथ-साथ दूसरे कस्टम एलिमेंट को भी बढ़ाया जा सकता है. किसी एलिमेंट को बढ़ाने के लिए, आपको registerElement() नाम और एलिमेंट का prototype पास करना होगा.

नेटिव एलिमेंट को बड़ा करना

मान लें कि आप रेगुलर जो <button> से खुश नहीं हैं. आपको "मेगा बटन" बनाना है, तो आप इसकी क्षमताओं को और बेहतर बनाना चाहते हैं. <button> एलिमेंट को बढ़ाने के लिए, ऐसा नया एलिमेंट बनाएं जिसमें HTMLButtonElement का prototype और extends एलिमेंट का नाम शामिल हो. इस मामले में, "बटन":

var MegaButton = document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: 'button'
});

नेटिव एलिमेंट से इनहेरिट किए जाने वाले कस्टम एलिमेंट को टाइप एक्सटेंशन कस्टम एलिमेंट कहा जाता है. ये HTMLElement के खास वर्शन से इनहेरिट किए जाते हैं. इसका इस्तेमाल करके, यह कहा जा सकता है कि "एलिमेंट X एक Y है".

उदाहरण:

<button is="mega-button">

कस्टम एलिमेंट को बढ़ाना

<x-foo> कस्टम एलिमेंट को बढ़ाने वाला <x-foo-extended> एलिमेंट बनाने के लिए, बस उसका प्रोटोटाइप इनहेरिट करें और बताएं कि आपने कौनसा टैग इस्तेमाल किया है:

var XFooProto = Object.create(HTMLElement.prototype);
...

var XFooExtended = document.registerElement('x-foo-extended', {
    prototype: XFooProto,
    extends: 'x-foo'
});

एलिमेंट प्रोटोटाइप बनाने के बारे में ज़्यादा जानकारी के लिए, नीचे JS प्रॉपर्टी और तरीके जोड़ना लेख देखें.

एलिमेंट को कैसे अपग्रेड किया जाता है

क्या आपने कभी सोचा है कि एचटीएमएल पार्सर, नॉन-स्टैंडर्ड टैग पर फ़िट क्यों नहीं होता? उदाहरण के लिए, अगर हम पेज पर <randomtag> का एलान करते हैं, तो हमें बहुत खुशी होती है. एचटीएमएल स्पेसिफ़िकेशन के मुताबिक:

माफ़ करें <randomtag>! आप स्टैंडर्ड नहीं हैं और इनहेरिट किए गए हैं: HTMLUnknownElement.

कस्टम एलिमेंट के लिए भी ऐसा ही नहीं होता. कस्टम एलिमेंट के मान्य नाम वाले एलिमेंट, HTMLElement से इनहेरिट किए जाते हैं. Ctrl + Shift + J (या Mac पर Cmd + Opt + J) को चालू करके इस तथ्य की पुष्टि की जा सकती है. कोड की इन लाइनों में चिपकाया जा सकता है, जो true दिखाता है:

// "tabs" is not a valid custom element name
document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype

// "x-tabs" is a valid custom element name
document.createElement('x-tabs').__proto__ == HTMLElement.prototype

हल नहीं किए गए एलिमेंट

कस्टम एलिमेंट, document.registerElement() का इस्तेमाल करके स्क्रिप्ट में रजिस्टर किए जाते हैं. इसलिए, ब्राउज़र उनकी परिभाषा को रजिस्टर करने से पहले उनके बारे में एलान कर सकता है या उन्हें बना सकता है. उदाहरण के लिए, पेज पर <x-tabs> का एलान किया जा सकता है, लेकिन document.registerElement('x-tabs') को बाद में शुरू किया जा सकता है.

एलिमेंट को उनकी परिभाषा में अपग्रेड करने से पहले, उन्हें अनसुलझे एलिमेंट कहा जाता है. ये ऐसे एचटीएमएल एलिमेंट हैं जिनमें कस्टम एलिमेंट का मान्य नाम मौजूद है, लेकिन उसे रजिस्टर नहीं किया गया है.

इस टेबल से, चीज़ों को ठीक-ठाक रखने में मदद मिल सकती है:

नाम इससे इनहेरिट होता है उदाहरण
हल नहीं किया गया एलिमेंट HTMLElement <x-tabs>, <my-element>
अज्ञात एलिमेंट HTMLUnknownElement <tabs>, <foo_bar>

एलिमेंट को इंस्टैंशिएट करना

एलिमेंट बनाने की सामान्य तकनीक अब भी कस्टम एलिमेंट पर लागू होती हैं. किसी भी स्टैंडर्ड एलिमेंट की तरह, उन्हें एचटीएमएल में या JavaScript का इस्तेमाल करके डीओएम में बनाया जा सकता है.

कस्टम टैग शुरू करना

उनका एलान करें:

<x-foo></x-foo>

JS में डीओएम बनाएं:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

new ऑपरेटर का इस्तेमाल करें:

var xFoo = new XFoo();
document.body.appendChild(xFoo);

टाइप एक्सटेंशन एलिमेंट को इंस्टैंशिएट करना

टाइप एक्सटेंशन-स्टाइल के कस्टम एलिमेंट बनाना, कस्टम टैग के काफ़ी करीब है.

उनका एलान करें:

<!-- <button> "is a" mega button -->
<button is="mega-button">

JS में डीओएम बनाएं:

var megaButton = document.createElement('button', 'mega-button');
// megaButton instanceof MegaButton === true

जैसा कि आपको दिख रहा है, अब document.createElement() का ओवरलोड हो गया वर्शन है, जो दूसरे पैरामीटर के तौर पर is="" एट्रिब्यूट को लेता है.

new ऑपरेटर का इस्तेमाल करें:

var megaButton = new MegaButton();
document.body.appendChild(megaButton);

अब तक हमने यह सीखा है कि ब्राउज़र को किसी नए टैग के बारे में बताने के लिए, document.registerElement() का इस्तेमाल कैसे करें...लेकिन इससे कुछ खास नहीं होता है. प्रॉपर्टी और तरीके जोड़ें.

JS प्रॉपर्टी और तरीके जोड़ना

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

यहां पूरा उदाहरण दिया गया है:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
    alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);

बेशक, prototype बनाने के कई हज़ार तरीके हैं. अगर आपको इस तरह के प्रोटोटाइप बनाना पसंद नहीं है, तो यहां इसका छोटा सा वर्शन दिया गया है:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    bar: {
      get: function () {
        return 5;
      }
    },
    foo: {
      value: function () {
        alert('foo() called');
      }
    }
  })
});

पहले फ़ॉर्मैट में ES5 Object.defineProperty का इस्तेमाल किया जा सकता है. दूसरा विकल्प get/set का इस्तेमाल करने की अनुमति देता है.

लाइफ़साइकल कॉलबैक के तरीके

एलिमेंट अपने जीवन के दिलचस्प समय पर टैप करने के लिए खास तरीके तय कर सकते हैं. इन तरीकों को सही तरीके से लाइफ़साइकल कॉलबैक नाम दिए गए हैं. हर एक का एक खास नाम और मकसद है:

कॉलबैक का नाम कॉल कब किया गया
createdCallback एलिमेंट का एक इंस्टेंस बनाया गया है
attachedCallback दस्तावेज़ में एक इंस्टेंस डाला गया
detachedCallback इंस्टेंस को दस्तावेज़ से हटाया गया
attributeChangedCallback(attrName, oldVal, newVal) कोई एट्रिब्यूट जोड़ा गया, हटाया गया या अपडेट किया गया

उदाहरण: <x-foo> पर createdCallback() और attachedCallback() के बारे में जानकारी देना:

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

सभी लाइफ़साइकल कॉलबैक ज़रूरी नहीं हैं, लेकिन ज़रूरत पड़ने पर उन्हें तय करें. उदाहरण के लिए, मान लें कि आपका एलिमेंट काफ़ी जटिल है और इससे createdCallback() में IndexedDB से कनेक्शन खुलता है. कॉन्टेंट को डीओएम से हटाने से पहले, detachedCallback() में ज़रूरी क्लीनअप करें. ध्यान दें: इस पर भरोसा न करें. उदाहरण के लिए, अगर उपयोगकर्ता टैब को बंद कर देता है, लेकिन इसे ऑप्टिमाइज़ेशन हुक की तरह लगता है.

एक और इस्तेमाल के उदाहरण की लाइफ़साइकल कॉलबैक, एलिमेंट पर डिफ़ॉल्ट इवेंट लिसनर को सेट अप करने के लिए है:

proto.createdCallback = function() {
  this.addEventListener('click', function(e) {
    alert('Thanks!');
  });
};

मार्कअप जोड़ना

हमने JavaScript API के आधार पर <x-foo> बनाया है, लेकिन वह खाली है! क्या हम रेंडर करने के लिए इसे कुछ एचटीएमएल देंगे?

लाइफ़साइकल कॉलबैक यहां आसानी से इस्तेमाल किए जा सकते हैं. खास तौर पर, हम किसी एलिमेंट को कुछ डिफ़ॉल्ट एचटीएमएल से एंड करने के लिए, createdCallback() का इस्तेमाल कर सकते हैं:

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    this.innerHTML = "**I'm an x-foo-with-markup!**";
};

var XFoo = document.registerElement('x-foo-with-markup', {prototype: XFooProto});

इस टैग को इंस्टैंशिएट करने और DevTools में इसकी जांच करने (राइट क्लिक करके, एलिमेंट की जांच करें चुनें) में यह दिखना चाहिए:

▾<x-foo-with-markup>
  **I'm an x-foo-with-markup!**
</x-foo-with-markup>

शैडो DOM में इंंटरनल एनकैप्सुलेट करना

शैडो डीओएम अपने-आप में कॉन्टेंट को इकट्ठा करने का एक बेहतरीन टूल है. कस्टम तत्वों के साथ इसका उपयोग करें और चीज़ें शानदार हो जाती हैं!

शैडो DOM कस्टम एलिमेंट देता है:

  1. अपनी हिम्मत छिपाने का एक तरीका, जिससे उपयोगकर्ताओं को ऐसी जानकारी से बचाया जा सके जिससे खून-खराबे वाले तरीके से जानकारी दी जा सके.
  2. स्टाइल एनकैप्सुलेशन...के लिए मुफ़्त.

Shadow DOM से कोई एलिमेंट बनाना एक ऐसा एलिमेंट बनाने जैसा है जो बुनियादी मार्कअप को रेंडर करता है. यह अंतर createdCallback() में है:

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    // 1. Attach a shadow root on the element.
    var shadow = this.createShadowRoot();

    // 2. Fill it with markup goodness.
    shadow.innerHTML = "**I'm in the element's Shadow DOM!**";
};

var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});

एलिमेंट के .innerHTML को सेट करने के बजाय, मैंने <x-foo-shadowdom> के लिए शैडो रूट बनाया है और फिर इसे मार्कअप से भर दिया है. DevTools में "शैडो डीओएम दिखाएं" सेटिंग चालू होने पर, आपको एक #shadow-root दिखेगा जिसे बड़ा किया जा सकता है:

▾<x-foo-shadowdom>
  ▾#shadow-root
    **I'm in the element's Shadow DOM!**
</x-foo-shadowdom>

यही है शैडो रूट!

टेंप्लेट से एलिमेंट बनाना

एचटीएमएल टेंप्लेट, एपीआई का एक और नया तरीका है. यह कस्टम एलिमेंट में आसानी से फ़िट हो जाता है.

उदाहरण: <template> और शैडो DOM से बनाए गए एलिमेंट को रजिस्टर करना:

<template id="sdtemplate">
  <style>
    p { color: orange; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<script>
  var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var t = document.querySelector('#sdtemplate');
        var clone = document.importNode(t.content, true);
        this.createShadowRoot().appendChild(clone);
      }
    }
  });
  document.registerElement('x-foo-from-template', {prototype: proto});
</script>

<template id="sdtemplate">
  <style>:host p { color: orange; }</style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<div class="demoarea">
  <x-foo-from-template></x-foo-from-template>
</div>

कोड की इन कुछ लाइनों में ढेर सारी खूबियां हैं. आइए, हर घटना के बारे में जानते हैं:

  1. हमने एचटीएमएल में एक नया एलिमेंट रजिस्टर किया है: <x-foo-from-template>
  2. एलिमेंट का DOM <template> से बनाया गया था
  3. शैडो DOM का इस्तेमाल करके एलिमेंट की डरावनी जानकारी छिपा दी जाती है
  4. शैडो DOM एलिमेंट स्टाइल एनकैप्सुलेशन देता है, जैसे कि p {color: orange;} पूरे पेज को नारंगी रंग में नहीं बदल रहा है

बहुत अच्छे!

कस्टम एलिमेंट को बेहतर बनाना

किसी भी एचटीएमएल टैग की तरह, आपके कस्टम टैग का इस्तेमाल करने वाले लोग इसे सिलेक्टर की मदद से स्टाइल कर सकते हैं:

<style>
  app-panel {
    display: flex;
  }
  [is="x-item"] {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
  [is="x-item"]:hover {
    opacity: 1.0;
    background: rgb(255, 0, 255);
    color: white;
  }
  app-panel > [is="x-item"] {
    padding: 5px;
    list-style: none;
    margin: 0 7px;
  }
</style>

<app-panel>
    <li is="x-item">Do</li>
    <li is="x-item">Re</li>
    <li is="x-item">Mi</li>
</app-panel>

शैडो DOM का इस्तेमाल करने वाले एलिमेंट को स्टाइल करना

जब शैडो डीओएम को मिक्स में शामिल किया जाता है, तो रैबिट होल बहुत ज़्यादा गहरा हो जाता है. Shadow DOM का इस्तेमाल करने वाले कस्टम एलिमेंट अपने बेहतरीन फ़ायदे लेते हैं.

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

शैडो डीओएम स्टाइलिंग एक बड़ा विषय है! अगर आपको इस बारे में ज़्यादा जानना है, तो हमारा सुझाव है कि मेरे कुछ अन्य लेख पढ़ें:

:समस्या ठीक नहीं हुई के इस्तेमाल से एफ़ओयूसी रोकथाम

FOUC को कम करने के लिए, कस्टम एलिमेंट में नई सीएसएस स्यूडो क्लास, :unresolved की जानकारी दी गई है. इसका इस्तेमाल बिना हल किए गए एलिमेंट को टारगेट करने के लिए करें. ऐसा तब तक करें, जब तक ब्राउज़र आपके createdCallback() को शुरू नहीं करता (लाइफ़साइकल के तरीके देखें). ऐसा होने के बाद, वह एलिमेंट अनसुलझने वाला एलिमेंट नहीं रहता. अपग्रेड की प्रोसेस पूरी हो गई है और एलिमेंट अपनी परिभाषा में बदल गया है.

उदाहरण: रजिस्टर होने पर "x-foo" टैग में फ़ेड करें:

<style>
  x-foo {
    opacity: 1;
    transition: opacity 300ms;
  }
  x-foo:unresolved {
    opacity: 0;
  }
</style>

ध्यान रखें कि :unresolved सिर्फ़ नहीं हटाए गए एलिमेंट पर लागू होता है, न कि HTMLUnknownElement से इनहेरिट किए गए एलिमेंट पर. एलिमेंट को अपग्रेड करने का तरीका देखें.

<style>
  /* apply a dashed border to all unresolved elements */
  :unresolved {
    border: 1px dashed red;
    display: inline-block;
  }
  /* x-panel's that are unresolved are red */
  x-panel:unresolved {
    color: red;
  }
  /* once the definition of x-panel is registered, it becomes green */
  x-panel {
    color: green;
    display: block;
    padding: 5px;
    display: block;
  }
</style>

<panel>
    I'm black because :unresolved doesn't apply to "panel".
    It's not a valid custom element name.
</panel>

<x-panel>I'm red because I match x-panel:unresolved.</x-panel>

इतिहास और ब्राउज़र सहायता

सुविधा की पहचान करने की सुविधा

सुविधा का पता लगाने के लिए, यह जांच करना ज़रूरी है कि document.registerElement() मौजूद है या नहीं:

function supportsCustomElements() {
    return 'registerElement' in document;
}

if (supportsCustomElements()) {
    // Good to go!
} else {
    // Use other libraries to create components.
}

ब्राउज़र समर्थन

document.registerElement() ने पहली बार Chrome 27 और Firefox ~23 में एक फ़्लैग के पीछे लैंडिंग शुरू किया. हालांकि, उसके बाद से इन चीज़ों में काफ़ी बदलाव हो गए हैं. अपडेट की गई विशेषताओं के लिए सही सहायता पाने वाला पहला Chrome 31 है.

ब्राउज़र के बेहतर होने तक, polyfill का इस्तेमाल करें. Google के Polymer और Mozilla के X-Tag इसका इस्तेमाल करते हैं.

HTMLElementElement के साथ क्या हुआ?

आपको पता है कि स्टैंडर्ड कार्यक्रम का पालन करने वाले कारोबारों की संख्या <element> थी. वह मधुमक्खियों के घुटनों का था. इसका इस्तेमाल, नए एलिमेंट को डिक्लेरेटिव तौर पर रजिस्टर करने के लिए किया जा सकता है:

<element name="my-element">
    ...
</element>

माफ़ करें, अपग्रेड की प्रोसेस, कॉर्नर केस, और आर्मेडडन जैसी स्थितियों में, टाइम की कई समस्याओं का सामना करना पड़ रहा था. <element> को हटाया गया. अगस्त 2013 में, डिमिट्री ग्लाज़्कोव ने सार्वजनिक-वेबऐप्लिकेशन पर पोस्ट करके, इसे हटाने की घोषणा की थी. इसमें फ़िलहाल तो यह घोषणा की गई है.

ध्यान दें कि Polymer इस बात का ध्यान रखता है कि <polymer-element> के साथ, एलिमेंट रजिस्ट्रेशन के डिक्लेरेटिव टोन को लागू किया जाता है. कैसे करें? इसमें, document.registerElement('polymer-element') और टेंप्लेट से एलिमेंट बनाने में बताई गई तकनीकों का इस्तेमाल किया जाता है.

नतीजा

कस्टम एलिमेंट से हमें एचटीएमएल की शब्दावली बढ़ाने, उसे नई तरकीबें सिखाने, और वेब प्लैटफ़ॉर्म के वर्महोल से निकलने का टूल मिलता है. उन्हें Shadow DOM और <template> जैसे अन्य नए प्लैटफ़ॉर्म प्रिमिटिव के साथ जोड़ा जाता है और हमें वेब कॉम्पोनेंट की तस्वीर अच्छी लगती है. मार्कअप फिर से आकर्षक हो सकता है!

अगर आपको वेब कॉम्पोनेंट का इस्तेमाल शुरू करना है, तो मेरा सुझाव है कि पॉलीमर का इस्तेमाल करें. आपके काम को आगे बढ़ाने के लिए इसमें बहुत सारी खूबियां हैं.