การขยายองค์ประกอบในตัว
ปรับแต่งองค์ประกอบที่มีอยู่ด้วยแอตทริบิวต์ is
การขยายองค์ประกอบในตัว เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
องค์ประกอบกำหนดเองสองประเภท
ข้อกำหนดกำหนดองค์ประกอบกำหนดเองแบบอิสระ (ขยาย HTMLElement และใช้เป็น <my-card>) และองค์ประกอบในตัวที่ปรับแต่ง (ขยายคลาสในตัวเฉพาะและใช้เป็น <button is="my-button">) องค์ประกอบในตัวที่ปรับแต่งจะสืบทอดความหมายขององค์ประกอบในตัวโดยอัตโนมัติ
เหตุใดจึงควรขยายองค์ประกอบในตัว
<my-button> แบบอิสระจะไม่มีพฤติกรรมของ <button> ในตัวเลย — ไม่ทำงานเมื่อกด Enter/Space ไม่เข้าร่วมแบบฟอร์ม และไม่มี role="button" สำหรับเทคโนโลยีช่วยเหลือ ปุ่มที่ปรับแต่ง (is="my-button") จะสืบทอดสิ่งเหล่านี้โดยอัตโนมัติ
การขยายคลาส
ขยายคลาส HTML เฉพาะแทน HTMLElement: class MyButton extends HTMLButtonElement {} องค์ประกอบจะยังคงมีพฤติกรรมในตัวทั้งหมด — การส่งแบบฟอร์ม การจัดการโฟกัส และสถานะปิดใช้งาน — แล้วคุณจึงเพิ่มความสามารถของตนเองต่อจากนั้น
class MyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontWeight = "bold";
}
}การลงทะเบียนด้วยตัวเลือก extends
customElements.define("my-button", MyButton, { extends: "button" }) อาร์กิวเมนต์ที่สามจะบอกระบบลงทะเบียนว่าองค์ประกอบนี้ขยายแท็กในตัวใด หากไม่มีอาร์กิวเมนต์นี้ การลงทะเบียนจะทำให้เกิดข้อผิดพลาด
แอตทริบิวต์ is
ใช้องค์ประกอบในตัวที่ปรับแต่งด้วยแอตทริบิวต์ is บนแท็กที่มีอยู่: <button is="my-button">Click</button> หากเขียน <my-button> แทน จะสร้างองค์ประกอบแบบอิสระและสูญเสียพฤติกรรมในตัว
ซาฟารีไม่รองรับสิ่งนี้
ซาฟารีปฏิเสธที่จะใช้งานองค์ประกอบในตัวที่ปรับแต่ง โดยอ้างข้อกังวลด้านการเข้าถึง องค์ประกอบเหล่านี้ทำงานในโครม เอดจ์ และไฟร์ฟอกซ์ แต่ในซาฟารี แอตทริบิวต์ is จะถูกละเว้น และองค์ประกอบจะทำงานเหมือน <button> ธรรมดา ใช้โพลีฟิลล์อย่างเป็นทางการเมื่อต้องการรองรับซาฟารี
ตัวเลือกโพลีฟิลล์
โพลีฟิลล์ @ungap/custom-elements ช่วยให้ซาฟารีรองรับองค์ประกอบในตัวที่ปรับแต่งได้อีกครั้ง โพลีฟิลล์นี้มีขนาดเล็กและได้รับการดูแลอย่างดี ควรเพิ่มเมื่อทีมของคุณต้องการการรองรับข้ามเบราว์เซอร์โดยไม่ต้องเลิกใช้รูปแบบแอตทริบิวต์ is
ทางเลือกแบบอิสระ
หากการรองรับซาฟารีโดยไม่ใช้โพลีฟิลล์เป็นเรื่องสำคัญ ให้สร้างองค์ประกอบแบบอิสระแทน แล้วจำลองพฤติกรรมที่ต้องการด้วยตนเอง ได้แก่ เพิ่ม role="button" และ tabindex="0" เพิ่มตัวจัดการแป้นพิมพ์สำหรับ Enter/Space และเชื่อมโยงกับแบบฟอร์มผ่านส่วนติดต่อ ElementInternals
API การเชื่อมโยงกับแบบฟอร์ม
องค์ประกอบแบบอิสระสามารถเข้าร่วมการส่งแบบฟอร์มได้ด้วยการตั้งค่า static formAssociated = true และใช้ this.attachInternals() ออบเจ็กต์ ElementInternals ที่ได้จะมี setFormValue และ setValidity สำหรับการผสานรวมกับแบบฟอร์มอย่างสมบูรณ์
ควรเลือกแบบใดเมื่อใด
เลือกองค์ประกอบในตัวที่ปรับแต่งสำหรับองค์ประกอบที่มีพฤติกรรมส่วนใหญ่เหมือนองค์ประกอบในตัว (ปุ่มที่มีความสามารถเพิ่มเติม ช่องป้อนข้อมูลอัจฉริยะ) และแพลตฟอร์มของคุณรองรับโครม/ไฟร์ฟอกซ์ หรือคุณยอมรับการใช้โพลีฟิลล์ เลือกองค์ประกอบแบบอิสระสำหรับองค์ประกอบใหม่ทั้งหมด (การ์ด กล่องโต้ตอบ) ที่ไม่มีองค์ประกอบในตัวเทียบเท่า
ข้อผิดพลาด: ปุ่มแบบอิสระ
ข้อผิดพลาดที่พบบ่อยที่สุดขององค์ประกอบเว็บคือการสร้าง <my-button> เป็นองค์ประกอบแบบอิสระ องค์ประกอบนี้จะไม่ส่งแบบฟอร์ม ไม่ตอบสนองต่อ Enter/Space และจะไม่ถูกประกาศว่าเป็นปุ่ม คุณควรขยาย HTMLButtonElement หรือจำลองพฤติกรรมทุกอย่างของปุ่มจริงอย่างรอบคอบ
ตรวจสอบความรู้
ข้อได้เปรียบในทางปฏิบัติของการขยาย HTMLButtonElement (องค์ประกอบในตัวที่ปรับแต่ง) เหนือการขยาย HTMLElement (องค์ประกอบแบบอิสระ) สำหรับองค์ประกอบที่มีลักษณะเหมือนปุ่มคืออะไร
สรุป
องค์ประกอบในตัวที่ปรับแต่งจะขยายคลาส HTML เฉพาะ (คลาสปุ่ม HTML และคลาสช่องป้อนข้อมูล HTML) และใช้งานผ่านแอตทริบิวต์ is โดยสืบทอดพฤติกรรมดั้งเดิมทั้งหมด ลงทะเบียนด้วยตัวเลือก { extends: "button" } ซาฟารีไม่รองรับองค์ประกอบเหล่านี้โดยกำเนิด — เมื่อจำเป็นต้องรองรับข้ามเบราว์เซอร์อย่างสมบูรณ์ ให้ใช้โพลีฟิลล์หรือใช้องค์ประกอบแบบอิสระพร้อมจำลองพฤติกรรมด้วยตนเอง
คำถามที่พบบ่อย
บทเรียน “การขยายองค์ประกอบในตัว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การขยายองค์ประกอบในตัว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การขยายองค์ประกอบในตัว”
ปรับแต่งองค์ประกอบที่มีอยู่ด้วยแอตทริบิวต์ is คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การขยายองค์ประกอบในตัว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดองค์ประกอบด้วย customElements.define
- connectedCallback และ disconnectedCallback
- แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback
- การขยายองค์ประกอบในตัว