หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Boris Smus

บทนำ

เว็บไม่มีการแสดงออกอย่างรุนแรง ลองดูตัวอย่างเว็บแอป "สมัยใหม่" อย่าง Gmail เพื่อดูว่าสิ่งที่เราหมายถึงเป็นอย่างไร

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

มาร์กอัปเซ็กซี่ มาลองทำกัน

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

กําหนดองค์ประกอบ HTML/DOM ใหม่
สร้างองค์ประกอบที่ขยายมาจากองค์ประกอบอื่นๆ
รวมฟังก์ชันการทํางานที่กําหนดเองเข้าด้วยกันอย่างเป็นระเบียบในแท็กเดียว
ขยาย 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> หรือจะใช้เทคนิคอื่นๆ ในการสร้างอินสแตนซ์ขององค์ประกอบก็ได้หากไม่ต้องการใช้คอนสตรคเตอร์

หมายเหตุ: หากไม่ต้องการให้ตัวสร้างปรากฏในออบเจ็กต์ window ระดับโลก ให้ใส่ไว้ในเนมสเปซ (var myapp = {}; myapp.XFoo = document.registerElement('x-foo');) หรือวางไว้ที่ด้านล่าง

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

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

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

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

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

หมายเหตุ: หากต้องการสร้างองค์ประกอบ A ที่ขยายองค์ประกอบ B องค์ประกอบ A ต้องรับค่า prototype ของ องค์ประกอบ B

องค์ประกอบที่กำหนดเองซึ่งรับค่ามาจากองค์ประกอบเนทีฟเรียกว่าองค์ประกอบที่กำหนดเองของส่วนขยายประเภท โดยรับค่ามาจาก 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

หมายเหตุ: ต้องใช้อินเทอร์เฟซ HTMLUnknownElement สำหรับองค์ประกอบ HTML ที่ไม่ได้กำหนดไว้ในข้อกำหนดนี้

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

แต่จะไม่ใช้กับองค์ประกอบที่กำหนดเอง องค์ประกอบที่มีชื่อองค์ประกอบที่กําหนดเองที่ถูกต้องจะรับค่าจาก HTMLElement คุณสามารถยืนยันข้อเท็จจริงนี้ได้โดยการเปิด Console: 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

หมายเหตุ: <x-tabs> จะยังคงเป็น HTMLUnknownElement ในเบราว์เซอร์ที่ไม่รองรับ document.registerElement()

องค์ประกอบที่ยังไม่ได้รับการแก้ไข

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

เมธอด Callback ของวงจร

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

ชื่อการติดต่อกลับ	เรียกใช้เมื่อ
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() หมายเหตุ: คุณไม่ควรใช้เหตุการณ์นี้ เช่น หากผู้ใช้ปิดแท็บ แต่ให้คิดว่าเป็นฮุกการเพิ่มประสิทธิภาพที่เป็นไปได้

Callback วงจรชีวิตของ Use Case อีกอย่างหนึ่งคือการตั้งค่า Listeners เหตุการณ์เริ่มต้นในองค์ประกอบ

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

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

เราได้สร้าง <x-foo> แล้ว ตั้งค่า JavaScript API ให้แล้ว แต่ไม่มีข้อมูล จะให้แสดงผล HTML ไหม

Lifecycle Callback จะมีประโยชน์ในกรณีนี้ โดยเฉพาะอย่างยิ่ง เราสามารถใช้ 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 ช่วยให้องค์ประกอบที่กําหนดเองมีสิ่งต่อไปนี้

วิธีซ่อนข้อมูลภายใน ซึ่งช่วยปกป้องผู้ใช้จากรายละเอียดการใช้งานที่ยุ่งยาก
การห่อหุ้มสไตล์…ฟรี

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

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

นั่นคือรูทเงา

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

เทมเพลต 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>

โค้ดไม่กี่บรรทัดนี้มีประสิทธิภาพมาก มาทําความเข้าใจสิ่งที่เกิดขึ้นกัน

เราได้ลงทะเบียนองค์ประกอบใหม่ใน HTML แล้ว นั่นคือ <x-foo-from-template>
DOM ขององค์ประกอบสร้างขึ้นจาก <template>
รายละเอียดที่น่ากลัวขององค์ประกอบจะซ่อนอยู่โดยใช้ Shadow DOM
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 DOM ผสมผสานองค์ประกอบกับการห่อหุ้มสไตล์ สไตล์ที่กําหนดใน Shadow Root จะไม่แสดงในโฮสต์และจะไม่แสดงในหน้า ในกรณีขององค์ประกอบที่กําหนดเอง องค์ประกอบนั้นจะเป็นโฮสต์ พร็อพเพอร์ตี้ของการจัดรูปแบบแบบรวมยังช่วยให้องค์ประกอบที่กำหนดเองกำหนดสไตล์เริ่มต้นของตนเองได้อีกด้วย

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

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

การป้องกัน FOUC โดยใช้ :unresolved

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

หมายเหตุ: Chrome 29 รองรับ CSS :unresolved โดยค่าเริ่มต้น

ตัวอย่าง: แท็ก "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 เป็นเวอร์ชันแรกที่รองรับข้อกำหนดฉบับปรับปรุงอย่างเต็มรูปแบบ

หมายเหตุ: คุณเปิดใช้องค์ประกอบที่กำหนดเองได้ใน Chrome 31 ในส่วน "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" ใน about:flags

ในระหว่างที่เบราว์เซอร์ยังไม่รองรับอย่างเต็มรูปแบบ ก็มี polyfill ที่ Polymer ของ Google และ X-Tag ของ Mozilla ใช้

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

ผู้ที่ติดตามการทํางานด้านมาตรฐานคงทราบดีว่าก่อนหน้านี้มี <element> เจ๋งสุดๆ คุณสามารถใช้เพื่อลงทะเบียนองค์ประกอบใหม่แบบประกาศได้ ดังนี้

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

ขออภัย ปัญหาด้านเวลาของกระบวนการอัปเกรด กรณีพิเศษ และสถานการณ์ที่ยากลำบากมีมากเกินไปที่จะแก้ไขได้ทั้งหมด <element> ต้องหยุดดำเนินการ ในเดือนสิงหาคม 2013 Dimitri Glazkov ได้โพสต์ใน public-webapps เพื่อประกาศการนําออกอย่างน้อยในตอนนี้

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

บทสรุป

องค์ประกอบที่กำหนดเองเป็นเครื่องมือที่ขยายคลังคำศัพท์ของ HTML, สอนเทคนิคใหม่ๆ และข้ามหลุมดำของแพลตฟอร์มเว็บ เมื่อรวมกับองค์ประกอบพื้นฐานอื่นๆ ของแพลตฟอร์มใหม่ เช่น Shadow DOM และ <template> เราก็เริ่มเห็นภาพรวมของ Web Components มาร์กอัปกลับมาเท่อีกครั้ง

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