เกริ่นนำ
เว็บไม่มีการแสดงออกอย่างมาก ถ้าอยากทราบความหมาย ลองดูเว็บแอปที่ "ทันสมัย" อย่าง 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 ทั้งหมดภายใต้หัวข้อคอมโพเนนต์ของเว็บ แต่ค่อนข้างอาจจะมีความสำคัญมากที่สุด คอมโพเนนต์เว็บจะไม่มีอยู่ หากไม่มีองค์ประกอบที่กำหนดเองที่ปลดล็อกอยู่ ดังนี้
- กำหนดองค์ประกอบ 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>
หรือจะใช้เทคนิคอื่นๆ ของการสร้างองค์ประกอบ หากไม่ต้องการใช้ตัวสร้าง
การขยายองค์ประกอบ
องค์ประกอบที่กำหนดเองช่วยให้คุณขยายองค์ประกอบ 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 แสดงองค์ประกอบที่กำหนดเองดังนี้
- วิธีซ่อนความกล้าที่จะปิดบังผู้ใช้จากรายละเอียดการใช้งานที่เต็มไปด้วยเลือด
- การห่อหุ้มรูปแบบ...ให้ฟรี
การสร้างองค์ประกอบจาก 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>.
</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>.
</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 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 ทำอะไรมากมายก็เกินพอแล้ว