การทำงานกับองค์ประกอบที่กำหนดเอง

เกริ่นนำ

เว็บไม่มีการแสดงออกอย่างมาก ถ้าอยากทราบความหมาย ลองดูเว็บแอปที่ "ทันสมัย" อย่าง GMail นะ

ไม่มีอะไรสมัยใหม่เกี่ยวกับซุป <div> และนี่แหละคือวิธีที่เราสร้างเว็บแอป เศร้าจัง เราไม่ควรเรียกร้องแพลตฟอร์มของเราเพิ่มขึ้นหรือ

มาร์กอัปเซ็กซี่ มาเริ่มสร้างเนื้อหากัน

HTML เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการจัดโครงสร้างเอกสาร แต่คลังคำศัพท์ของชุดหนังสือนั้นจำกัดไว้เพียงองค์ประกอบที่มาตรฐาน HTML กำหนด

จะเกิดอะไรขึ้นหากมาร์กอัปสำหรับ 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>

สดใหม่แค่ไหน! แอปนี้เหมาะสมมากเช่นกัน ทั้งมีความหมาย เข้าใจได้ง่าย และที่สำคัญที่สุดคือต้องบำรุงรักษาได้ ในอนาคต คุณจะรู้แน่ชัดว่ามันทำอะไร ด้วยการตรวจสอบกระดูกสันหลังที่ชี้ให้เห็นชัด

เริ่มต้นใช้งาน

องค์ประกอบที่กำหนดเอง ช่วยให้นักพัฒนาเว็บกำหนดองค์ประกอบ HTML ประเภทใหม่ได้ ข้อกำหนดดังกล่าวเป็นหนึ่งในรูปแบบพื้นฐานใหม่ๆ ของ API ทั้งหมดภายใต้หัวข้อคอมโพเนนต์ของเว็บ แต่ค่อนข้างอาจจะมีความสำคัญมากที่สุด คอมโพเนนต์เว็บจะไม่มีอยู่ หากไม่มีองค์ประกอบที่กำหนดเองที่ปลดล็อกอยู่ ดังนี้

1. กำหนดองค์ประกอบ HTML/DOM ใหม่
2. สร้างองค์ประกอบที่ขยายออกมาจากองค์ประกอบอื่นๆ
3. รวมฟังก์ชันที่กำหนดเองไว้ด้วยกันอย่างสมเหตุสมผลเป็นแท็กเดียว
4. ขยาย API ขององค์ประกอบ DOM ที่มีอยู่

การลงทะเบียนองค์ประกอบใหม่

องค์ประกอบที่กำหนดเองสร้างขึ้นโดยใช้ 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> ไม่ใช่ชื่อ ข้อจำกัดนี้ช่วยให้โปรแกรมแยกวิเคราะห์แยกแยะองค์ประกอบที่กำหนดเองออกจากองค์ประกอบปกติได้ แต่ก็ช่วยรับประกันความเข้ากันได้ในอนาคตเมื่อมีการเพิ่มแท็กใหม่ลงใน HTML ด้วย

อาร์กิวเมนต์ที่ 2 เป็นออบเจ็กต์ (ไม่บังคับ) ที่อธิบาย prototype ขององค์ประกอบ นี่คือที่สำหรับเพิ่มฟังก์ชันการทำงานที่กำหนดเอง (เช่น พร็อพเพอร์ตี้และเมธอดสาธารณะ) ลงในองค์ประกอบ รายละเอียดเพิ่มเติมในภายหลัง

โดยค่าเริ่มต้น องค์ประกอบที่กำหนดเองจะรับค่าจาก HTMLElement ดังนั้น ตัวอย่างก่อนหน้านี้จะเท่ากับ

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

การเรียก document.registerElement('x-foo') จะสอนเบราว์เซอร์เกี่ยวกับองค์ประกอบใหม่และแสดงผลตัวสร้างที่คุณสามารถใช้เพื่อสร้างอินสแตนซ์ของ <x-foo> หรือจะใช้เทคนิคอื่นๆ ของการสร้างองค์ประกอบ หากไม่ต้องการใช้ตัวสร้าง

การขยายองค์ประกอบ

องค์ประกอบที่กำหนดเองช่วยให้คุณขยายองค์ประกอบ HTML ที่มีอยู่ (เนทีฟ) รวมถึงองค์ประกอบที่กำหนดเองอื่นๆ ได้ หากต้องการขยายองค์ประกอบ คุณต้องส่ง registerElement() ชื่อและ prototype ขององค์ประกอบที่จะรับค่า

การขยายองค์ประกอบเนทีฟ

สมมติว่าคุณไม่พอใจกับ ข้าวต้ม <button> เป็นประจำ คุณจะต้องเพิ่มประสิทธิภาพของปุ่ม "Mega Button" หากต้องการขยายองค์ประกอบ <button> ให้สร้างองค์ประกอบใหม่ที่รับค่า prototype ของ HTMLButtonElement และ extends ชื่อองค์ประกอบ ในกรณีนี้ "button":

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

องค์ประกอบที่กำหนดเองซึ่งรับค่ามาจากองค์ประกอบที่มีอยู่ภายในเรียกว่าองค์ประกอบที่กำหนดเองของส่วนขยายประเภท โดยรับค่ามาจากเวอร์ชันพิเศษของ HTMLElement ในลักษณะที่จะพูดว่า "องค์ประกอบ X เป็น Y"

ตัวอย่าง

<button is="mega-button">

การขยายองค์ประกอบที่กำหนดเอง

หากต้องการสร้างองค์ประกอบ <x-foo-extended> ที่ขยายองค์ประกอบที่กำหนดเอง <x-foo> เพียงรับต้นแบบมาและบอกว่าได้มาจากแท็กใด ดังนี้

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

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

ดูการเพิ่มพร็อพเพอร์ตี้และเมธอด JS ด้านล่างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างต้นแบบขององค์ประกอบ

วิธีอัปเกรดองค์ประกอบ

คุณเคยสงสัยไหมว่าทำไมโปรแกรมแยกวิเคราะห์ HTML ไม่เหมาะกับแท็กที่ไม่ใช่มาตรฐาน ตัวอย่างเช่น เราจะยินดีอย่างยิ่งหากเราประกาศ <randomtag> ในหน้าเว็บ ตามข้อกำหนด HTML

ขออภัย คุณ <randomtag> คุณไม่ได้มาตรฐานและรับค่ามาจาก HTMLUnknownElement

ซึ่งองค์ประกอบที่กำหนดเองไม่ได้เหมือนกัน องค์ประกอบที่มีชื่อองค์ประกอบที่กำหนดเองที่ถูกต้องจะรับช่วงมาจาก HTMLElement คุณสามารถยืนยันข้อเท็จจริงนี้ได้โดยเริ่มการทำงานของคอนโซล: Ctrl + Shift + J (หรือ Cmd + Opt + J ใน Mac) แล้ววางลงในบรรทัดโค้ดต่อไปนี้ ซึ่งจะแสดง 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') ในภายหลัง

ก่อนที่องค์ประกอบจะอัปเกรดเป็นคําจํากัดความ จะเรียกว่าองค์ประกอบที่ยังไม่ได้ระบุ องค์ประกอบเหล่านี้คือองค์ประกอบ HTML ที่มีชื่อองค์ประกอบที่กำหนดเองที่ถูกต้องแต่ยังไม่ได้ลงทะเบียน

ตารางนี้อาจช่วยให้ทุกอย่างตรงไปตรงมา

ชื่อ	รับค่าจาก	ตัวอย่าง
องค์ประกอบที่ยังไม่ได้แก้ไข	HTMLElement	<x-tabs> <my-element>
องค์ประกอบที่ไม่รู้จัก	HTMLUnknownElement	<tabs> <foo_bar>

การสร้างอินสแตนซ์สำหรับองค์ประกอบ

เทคนิคทั่วไปในการสร้างองค์ประกอบยังคงใช้กับองค์ประกอบที่กำหนดเอง องค์ประกอบมาตรฐานอื่นๆ สามารถประกาศได้ใน HTML หรือสร้างใน DOM โดยใช้ JavaScript

การเริ่มต้นแท็กที่กำหนดเอง

ประกาศ:

<x-foo></x-foo>

สร้าง DOM ใน 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">

สร้าง DOM ใน JS:

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

คุณจะเห็นว่าตอนนี้มี document.createElement() เวอร์ชันที่โอเวอร์โหลด ซึ่งมีแอตทริบิวต์ is="" เป็นพารามิเตอร์ที่ 2

ใช้โอเปอเรเตอร์ new ดังนี้

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

จนถึงตอนนี้ เราได้เรียนรู้วิธีใช้ document.registerElement() เพื่อบอกเบราว์เซอร์เกี่ยวกับแท็กใหม่... แต่ก็ไม่ได้ช่วยอะไรมากนัก มาเพิ่มคุณสมบัติและวิธีการกัน

การเพิ่มพร็อพเพอร์ตี้และเมธอด JS

สิ่งที่ทรงพลังเกี่ยวกับองค์ประกอบที่กำหนดเองคือคุณรวมฟังก์ชันการทำงานที่ปรับแต่งให้เข้ากับองค์ประกอบนั้นๆ ได้โดยกำหนดคุณสมบัติและเมธอดในคำอธิบายองค์ประกอบ คิดว่านี่คือวิธีสร้าง API สาธารณะสำหรับองค์ประกอบ

ต่อไปนี้คือตัวอย่างแบบเต็ม

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 รายการที่ 2 อนุญาตให้ใช้ get/set

เมธอดการเรียกกลับสำหรับวงจร

องค์ประกอบสามารถกำหนดวิธีการพิเศษในการเข้าถึงช่วงเวลาที่น่าสนใจของการมีอยู่ เมธอดเหล่านี้ได้รับการตั้งชื่อที่เหมาะสมว่า Callbacks สําหรับวงจร แต่ละไฟล์มีชื่อและวัตถุประสงค์เฉพาะ ดังนี้

ชื่อติดต่อกลับ	โทรเมื่อ
createdCallback	อินสแตนซ์ขององค์ประกอบได้รับการสร้างขึ้น
attachedCallback	มีการแทรกอินสแตนซ์ลงในเอกสาร
detachedCallback	อินสแตนซ์ถูกนำออกจากเอกสารแล้ว
attributeChangedCallback(attrName, oldVal, newVal)	มีการเพิ่ม นำออก หรืออัปเดตแอตทริบิวต์

ตัวอย่าง: การกำหนด createdCallback() และ attachedCallback() ใน <x-foo>

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

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

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

การเรียกกลับสำหรับวงจรทั้งหมดเป็นตัวเลือกที่ไม่บังคับ แต่ให้กำหนดว่าเมื่อใด/หากเป็นไปได้ ตัวอย่างเช่น สมมติว่าองค์ประกอบซับซ้อนพอสมควรและเปิดการเชื่อมต่อกับ IndexedDB ใน createdCallback() ก่อนถูกนำออกจาก DOM ให้ล้างข้อมูลที่จำเป็นใน detachedCallback() หมายเหตุ: คุณไม่ควรพึ่งพาสิ่งนี้ เช่น ในกรณีที่ผู้ใช้ปิดแท็บ ให้คิดว่าแท็บนี้เป็นฮุกการเพิ่มประสิทธิภาพที่เป็นไปได้

การเรียกกลับสำหรับวงจรการใช้งานอีกกรณีหนึ่งคือการตั้งค่า Listener เหตุการณ์เริ่มต้นในองค์ประกอบ

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

การเพิ่มมาร์กอัป

เราได้สร้าง <x-foo> ให้กับ JavaScript API แล้ว แต่ก็ยังว่างเปล่า เราให้ HTML เพื่อแสดงผลไหม

การติดต่อกลับตลอดอายุการใช้งานมีประโยชน์ในส่วนนี้ โดยเฉพาะอย่างยิ่ง เราสามารถใช้ createdCallback() เพื่อรวมองค์ประกอบด้วย HTML เริ่มต้นบางส่วน ดังนี้

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});

การเริ่มต้นแท็กนี้และตรวจสอบในเครื่องมือสำหรับนักพัฒนาเว็บ (คลิกขวา เลือกตรวจสอบองค์ประกอบ) ควรแสดงข้อมูลต่อไปนี้

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

การรวมข้อมูลภายในใน Shadow DOM

โดย Shadow DOM เป็นเครื่องมือที่มีประสิทธิภาพในการห่อหุ้มเนื้อหา ใช้ร่วมกับองค์ประกอบที่กำหนดเองเพื่อให้สิ่งต่างๆ กลายเป็นเวทมนตร์!

Shadow 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 ขององค์ประกอบ ฉันสร้าง Shadow Root สำหรับ <x-foo-shadowdom> แล้วใส่มาร์กอัปลงไป เมื่อเปิดใช้การตั้งค่า "แสดง Shadow DOM" ในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะเห็น #shadow-root ที่ขยายได้

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

นั่นคือ Shadow Root!

การสร้างองค์ประกอบจากเทมเพลต

เทมเพลต HTML เป็น API พื้นฐานแบบใหม่ที่เข้ากับโลกขององค์ประกอบที่กำหนดเองอย่างลงตัว

ตัวอย่าง: การลงทะเบียนองค์ประกอบที่สร้างจาก <template> และ Shadow 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. เราได้ลงทะเบียนองค์ประกอบใหม่ใน HTML: <x-foo-from-template>
2. DOM ขององค์ประกอบสร้างขึ้นจาก <template>
3. ระบบซ่อนรายละเอียดที่น่ากลัวขององค์ประกอบโดยใช้ Shadow DOM
4. Shadow DOM แสดงการห่อหุ้มรูปแบบองค์ประกอบ (เช่น p {color: orange;} ไม่ได้เปลี่ยนทั้งหน้าเป็นสีส้ม)

เยี่ยมไปเลย

การจัดรูปแบบองค์ประกอบที่กำหนดเอง

เช่นเดียวกับแท็ก HTML อื่นๆ ผู้ใช้แท็กที่กำหนดเองสามารถจัดรูปแบบแท็กด้วยตัวเลือกได้ดังนี้

<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>

องค์ประกอบการจัดรูปแบบที่ใช้ Shadow DOM

เมื่อคุณนำ Shadow DOM เข้ามาใช้งาน ช่องกระต่ายจะลึกขึ้นมาก องค์ประกอบที่กำหนดเองที่ใช้ Shadow DOM ได้รับคุณประโยชน์ที่ยอดเยี่ยม

Shadow DOM รวมองค์ประกอบด้วยการห่อหุ้มรูปแบบ รูปแบบที่กําหนดใน Shadow Root จะไม่รั่วไหลออกจากโฮสต์และไม่มีเลือดออกจากหน้าเว็บ ในกรณีขององค์ประกอบที่กำหนดเอง ตัวองค์ประกอบเองจะเป็นโฮสต์ คุณสมบัติของการรวมรูปแบบยังช่วยให้องค์ประกอบที่กำหนดเองระบุรูปแบบเริ่มต้นด้วยตนเองได้อีกด้วย

การจัดรูปแบบ Shadow DOM เป็นหัวข้อใหญ่ หากคุณต้องการทราบข้อมูลเพิ่มเติม เราขอแนะนำให้อ่านบทความอื่นๆ ต่อไปนี้

• "คู่มือสำหรับองค์ประกอบการจัดรูปแบบ" ในเอกสารประกอบของ Polymer
• "Shadow DOM 201: CSS และการจัดรูปแบบ" ที่นี่

การป้องกัน FOUC โดยใช้ :ยังไม่ได้ระบุ

หากต้องการลด FOUC องค์ประกอบที่กำหนดเองจะระบุคลาสเทียมของ CSS ใหม่ :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() เริ่มบินกลับหลัง Flag ใน Chrome 27 และ Firefox ราว 23 อย่างไรก็ตาม ข้อกำหนดได้เปลี่ยนแปลงไปเล็กน้อยนับตั้งแต่นั้น Chrome 31 เป็นรุ่นแรกที่มี การรองรับอย่างแท้จริงสำหรับข้อกำหนดที่อัปเดต

เรามี polyfill ที่PolymerและX-Tagของ Mozilla ใช้งานจนกว่าการสนับสนุนเบราว์เซอร์จะมีประสิทธิภาพสูงสุด

เกิดอะไรขึ้นกับ HTMLElementElement

สำหรับคนที่ปฏิบัติตามมาตรฐานนี้ คุณคงทราบดีว่าเคยมี <element> เกิดขึ้น มันคือหัวผึ้ง คุณสามารถใช้รายงานนี้เพื่อประกาศการลงทะเบียนองค์ประกอบใหม่

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

ขออภัย มีปัญหาเรื่องเวลามากเกินไปในกระบวนการอัปเกรด กรณีมุมต่างๆ และสถานการณ์ที่คล้ายกับ ArmAGEdon จึงจะแก้ไขได้ <element> จำเป็นต้องอยู่ในชั้นวาง ในเดือนสิงหาคม 2013 Dimitri Glazkov ได้โพสต์ถึงเว็บแอปสาธารณะเพื่อประกาศการนำแอปดังกล่าวออกเป็นอย่างน้อยในขณะนี้

โปรดทราบว่า Polymer ใช้รูปแบบการลงทะเบียนองค์ประกอบแบบประกาศตัวด้วย <polymer-element> ต้องทำอย่างไร ฟีเจอร์นี้ใช้ document.registerElement('polymer-element') และเทคนิคที่ฉันอธิบายไว้ในการสร้างองค์ประกอบจากเทมเพลต

บทสรุป

องค์ประกอบที่กำหนดเองช่วยให้เราสามารถขยายคลังคำศัพท์ของ HTML สอนกลเม็ดใหม่ๆ และก้าวข้ามช่องโหว่ของแพลตฟอร์มเว็บ รวมไอเทมเหล่านั้นกับแพลตฟอร์มดั้งเดิมอื่นๆ อย่าง Shadow DOM และ <template> แล้วเราก็เริ่มตระหนักถึงรูปภาพของคอมโพเนนต์เว็บ มาร์กอัปอาจเซ็กซี่ได้เหมือนเดิม

หากคุณสนใจเริ่มต้นใช้งานคอมโพเนนต์ของเว็บ เราขอแนะนำให้ไปที่ Polymer ทำอะไรมากมายก็เกินพอแล้ว