การกำหนดองค์ประกอบด้วย customElements.define
ลงทะเบียนคลาสองค์ประกอบกำหนดเองกับเบราว์เซอร์
การกำหนดองค์ประกอบด้วย customElements.define เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
องค์ประกอบที่กำหนดเองคืออะไร
องค์ประกอบที่กำหนดเองช่วยให้คุณสร้างแท็ก HTML ของตนเองที่มีคลาส JavaScript คอยทำงานเบื้องหลัง เมื่อกำหนดแล้ว <my-card> จะทำงานเหมือนองค์ประกอบในตัวทุกประการ สามารถเขียนใน HTML ค้นหา จัดสไตล์ เขียนสคริปต์ และใช้ภายในเฟรมเวิร์กได้โดยไม่ต้องเปลี่ยนแปลง
ข้อกำหนดเรื่องยัติภังค์
ชื่อองค์ประกอบที่กำหนดเองทุกชื่อต้องมีขีดกลางอย่างน้อยหนึ่งตัว เช่น user-avatar, app-button, my-card ขีดกลางช่วยแยกองค์ประกอบที่กำหนดเองออกจากแท็ก HTML ในตัวทั้งที่มีอยู่และที่จะมีในอนาคต และเป็นข้อกำหนดที่ระบุไว้ในข้อมูลจำเพาะ
การกำหนดคลาส
องค์ประกอบที่กำหนดเองคือคลาสที่สืบทอดจาก HTMLElement (หรือคลาสย่อยขององค์ประกอบในตัว) คลาสนี้สามารถประกาศตัวสร้างและการเรียกกลับตามวงจรชีวิตได้ คุณสมบัติสาธารณะและเมธอดของคลาสจะกลายเป็นส่วนติดต่อสำหรับเขียนสคริปต์ขององค์ประกอบ
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}การลงทะเบียนด้วย define
customElements.define("my-card", MyCard) จะลงทะเบียนคลาสภายใต้ชื่อแท็กดังกล่าว หลังลงทะเบียน <my-card> ที่มีอยู่แล้วและที่จะเพิ่มในอนาคตทุกตัวในเอกสารจะถูกอัปเกรดเป็นอินสแตนซ์ของคลาสนี้
ต้องเรียก super()
ตัวสร้างต้องเรียก super() เป็นคำสั่งแรก ก่อนใช้งาน this การข้าม super() จะทำให้เกิดข้อผิดพลาด "Failed to construct 'HTMLElement'" ให้ถือว่านี่เป็นกฎมาตรฐานของตัวสร้างคลาส JavaScript
ห้ามอ่าน DOM ใน constructor
ตัวสร้างไม่สามารถอ่านแอตทริบิวต์หรือลูกขององค์ประกอบได้ เพราะสิ่งเหล่านี้อาจยังแยกวิเคราะห์ไม่เสร็จในขณะสร้าง ย้ายการตั้งค่าที่แตะ DOM ไปไว้ใน connectedCallback ซึ่งจะทำงานหลังจากองค์ประกอบอยู่ในเอกสารแล้วเท่านั้น
การลงทะเบียนมีผลถาวร
ชื่อองค์ประกอบหนึ่งชื่อสามารถลงทะเบียนได้เพียงครั้งเดียวต่อหน้า การกำหนดชื่อเดิมซ้ำจะทำให้เกิด NotSupportedError ให้โหลดหน้าใหม่เพื่อทดสอบการเปลี่ยนแปลงระหว่างการพัฒนา ส่วนในสภาพแวดล้อมจริงให้ลงทะเบียนแต่ละองค์ประกอบเพียงครั้งเดียวเมื่อเริ่มต้น
โพลีฟิลล์
องค์ประกอบที่กำหนดเองมีให้ใช้งานในเบราว์เซอร์สมัยใหม่ทุกตัว สำหรับเบราว์เซอร์รุ่นเก่ามาก (ซึ่งส่วนใหญ่เลิกใช้งานแล้ว) โพลีฟิลล์ webcomponents.js จะมีทางเลือกสำรองให้ โครงการใหม่สามารถใช้ความสามารถในตัวและข้ามโพลีฟิลล์ได้ทั้งหมด
ตรวจสอบสถานะการกำหนด
customElements.get("my-card") จะคืนค่าคลาสหากมีการกำหนดไว้ และคืนค่า undefined หากยังไม่ได้กำหนด customElements.whenDefined("my-card") จะคืนค่าพรอมิสที่เสร็จสมบูรณ์เมื่อองค์ประกอบได้รับการลงทะเบียน เหมาะสำหรับโค้ดที่ต้องรอการกำหนดซึ่งโหลดมาล่าช้า
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});การใช้องค์ประกอบ
เมื่อกำหนดแล้ว ให้ใช้องค์ประกอบนี้เหมือนแท็กในตัวทุกประการ: เขียนใน HTML (<my-card></my-card>), สร้างผ่าน document.createElement("my-card") หรือสร้างอินสแตนซ์ผ่าน new MyCard() แล้วแทรกลงไป ทั้งสามเส้นทางจะสร้างอินสแตนซ์เดียวกันที่ได้รับการอัปเกรด
หลักการตั้งชื่อ
เติมชื่อโครงการหรือบริษัทไว้ข้างหน้าชื่อองค์ประกอบที่กำหนดเอง (cd-card, app-modal) เพื่อหลีกเลี่ยงการชนกับไลบรารีอื่นในหน้าเดียวกัน ระบบนิเวศของเว็บคอมโพเนนต์ไม่ได้รวมเป็นชุดเดียว ใครก็ตามบนหน้าของคุณสามารถลงทะเบียนชื่อใดก็ได้ และการลงทะเบียนครั้งแรกจะมีผล
ตรวจสอบความรู้
เหตุใดชื่อองค์ประกอบที่กำหนดเองทุกชื่อจึงต้องมีขีดกลาง
สรุป
องค์ประกอบที่กำหนดเองคือคลาส JavaScript ที่สืบทอดจาก HTMLElement และลงทะเบียนผ่าน customElements.define("name", Class) โดยชื่อต้องมีขีดกลาง ตัวสร้างต้องเรียก super() ก่อน และต้องไม่อ่าน DOM ให้เลื่อนการทำงานกับ DOM ไปไว้ใน connectedCallback องค์ประกอบที่กำหนดแล้วจะทำงานเหมือนแท็กในตัวทุกที่
คำถามที่พบบ่อย
บทเรียน “การกำหนดองค์ประกอบด้วย customElements.define” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดองค์ประกอบด้วย customElements.define” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดองค์ประกอบด้วย customElements.define”
ลงทะเบียนคลาสองค์ประกอบกำหนดเองกับเบราว์เซอร์ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดองค์ประกอบด้วย customElements.define” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดองค์ประกอบด้วย customElements.define
- connectedCallback และ disconnectedCallback
- แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback
- การขยายองค์ประกอบในตัว