รูปแบบและการประกอบ

การประกอบใน Web Components คืออะไร?

การประกอบ (Composition) หมายถึงการสร้างคัสตอมเอลิเมนต์ขนาดใหญ่ที่มีความสามารถมากขึ้น โดยการประกอบคัสตอมเอลิเมนต์ขนาดเล็กที่มีหน้าที่เฉพาะเข้าด้วยกัน แทนที่จะเขียนเอลิเมนต์ขนาดใหญ่ชิ้นเดียวที่ทำทุกอย่าง คุณแบ่งงานออกเป็นส่วนย่อย — แต่ละส่วนเป็นคัสตอมเอลิเมนต์ของตัวเอง — แล้วนำมาซ้อนกันเพื่อสร้างวิดเจ็ตที่สมบูรณ์

แนวคิดนี้สะท้อนวิธีที่ HTML ดั้งเดิมทำงานอยู่แล้ว: <form> บรรจุ <input>, <label>, และ <button> ซึ่งแต่ละตัวรับผิดชอบส่วนเล็ก ๆ ของประสบการณ์โดยรวม Web Components ช่วยให้คุณสร้างโครงสร้างแบบเป็นชั้นที่นำกลับมาใช้ได้เช่นเดียวกันด้วยชื่อแท็กของคุณเอง

แผนภาพต้นไม้วิดเจ็ตที่ประกอบกัน

แผนภาพด้านล่างแสดงเอลิเมนต์ <card-widget> ที่ประกอบจากสองเอลิเมนต์ภายใน ได้แก่ <user-avatar> และ <action-button>

flowchart LR
  CW["card-widget"]
  UA["user-avatar"]
  AB["action-button"]
  CW --> UA
  CW --> AB

A composed widget tree

บทเรียนในโมดูลนี้

บทเรียน	Slug	สิ่งที่คุณจะได้เรียนรู้
การประกอบคอมโพเนนต์	`composition`	การซ้อนเอลิเมนต์, การสื่อสารผ่าน attribute, และ CustomEvent bubbling
ฟอร์ม-แอสโซซิเอทเทดเอลิเมนต์	`form-associated`	การทำให้คัสตอมเอลิเมนต์มีส่วนร่วมในฟอร์ม HTML ดั้งเดิม
รูปแบบการเข้าถึง	`accessibility`	ARIA roles, การนำทางด้วยคีย์บอร์ด, และการจัดการ focus
Declarative Shadow DOM	`declarative-shadow-dom`	shadow roots ที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย attribute `shadowrootmode`

ตัวอย่างที่รันได้

ตัวอย่างด้านล่างกำหนดคัสตอมเอลิเมนต์สองตัว: <name-tag> แสดงข้อความตัวหนาจาก attribute name และ <greeting-card> สร้าง <name-tag> และเพิ่มข้อความต้อนรับ — ประกอบสองเอลิเมนต์เข้าเป็นวิดเจ็ตเดียว

<greeting-card name="Alice"></greeting-card>