องค์ประกอบ Slot สำหรับการกระจายเนื้อหา
ส่งเนื้อหาของโฮสต์เข้า Shadow DOM ด้วยสล็อตที่มีชื่อและสล็อตเริ่มต้น
องค์ประกอบ Slot สำหรับการกระจายเนื้อหา เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
DOM ภายนอกเทียบกับ DOM เงา
องค์ประกอบลูกที่เขียนไว้ภายในคัสตอมเอลิเมนต์ใน HTML จะประกอบเป็น "DOM ภายนอก" ขององค์ประกอบนั้น ซึ่งไม่ได้อยู่ในทรีเงา โดยค่าเริ่มต้น เบราว์เซอร์จะไม่เรนเดอร์องค์ประกอบเหล่านี้ ทรีเงาต้องร้องขออย่างชัดเจนผ่าน <slot>
slot เริ่มต้น
องค์ประกอบ <slot> ภายในทรีเงาจะระบุตำแหน่งที่ควรแสดงองค์ประกอบลูกจาก DOM ภายนอก หากไม่มีชื่อ องค์ประกอบนี้จะเป็น slot เริ่มต้นและรับองค์ประกอบลูกโดยตรงของโฮสต์ได้ทุกชนิด
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>slot ที่มีชื่อ
คุณสามารถระบุ slot หลายรายการด้วยชื่อได้ ทรีเงาประกาศ <slot name="header"> ส่วนผู้ใช้เลือกใช้ด้วย <h1 slot="header"> องค์ประกอบลูกที่มีแอตทริบิวต์ slot ตรงกันจะเติมลงใน slot นั้น ส่วนองค์ประกอบลูกที่ไม่ตรงกันจะตกลงไปอยู่ใน slot เริ่มต้น
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>เนื้อหาสำรองของ slot
เนื้อหาระหว่างแท็กของ slot จะแสดงเฉพาะเมื่อไม่มีสิ่งใดถูกกำหนดให้กับ slot นั้น: <slot>No content provided</slot> ใช้เนื้อหานี้เพื่อแสดงข้อความตัวแทนหรือคำแนะนำสำหรับ slot ที่ว่างอยู่
การสืบทอดสไตล์ข้าม slot
องค์ประกอบลูกที่ถูกส่งเข้า slot ยังคงอยู่ใน DOM ภายนอก และสืบทอดสไตล์จากเอกสารหลัก ไม่ใช่จากทรีเงา ใช้องค์ประกอบเสมือน ::slotted() จากภายในทรีเงาเพื่อจัดสไตล์องค์ประกอบเหล่านี้: ::slotted(p) { color: red; }
ข้อจำกัดของ ::slotted
::slotted() สามารถเลือกได้เฉพาะองค์ประกอบลูกโดยตรงของโฮสต์ ซึ่งเป็นองค์ประกอบที่ถูกกระจายเข้าไปใน slot จริง ๆ เท่านั้น ไม่สามารถเลือกองค์ประกอบลูกหลานขององค์ประกอบเหล่านั้นได้ หากต้องการจัดสไตล์ที่ลึกกว่านั้น ให้เปิดเผยพร็อพเพอร์ตีแบบกำหนดเองของ CSS หรือใช้ ::part กับองค์ประกอบภายในทรีเงาแทน
การตรวจจับการเปลี่ยนแปลงของ slot
slot แต่ละรายการจะส่งเหตุการณ์ slotchange เมื่อ nodes ที่กำหนดให้กับ slot เปลี่ยนแปลง ให้รับฟังเหตุการณ์นี้เพื่อโต้ตอบกับการอัปเดตเนื้อหาแบบไดนามิก: slot.addEventListener("slotchange", handler) มีประโยชน์สำหรับคอมโพเนนต์ที่เค้าโครงขึ้นอยู่กับว่ามีองค์ประกอบลูกใดอยู่บ้าง
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes และ assignedElements
slot.assignedNodes() ส่งคืน nodes ทั้งหมดที่กำหนดให้กับ slot รวมถึงโหนดข้อความด้วย ส่วน slot.assignedElements() ส่งคืนเฉพาะองค์ประกอบลูกที่เป็น Element ซึ่งโดยทั่วไปเป็นสิ่งที่คุณต้องการเมื่อวนซ้ำเนื้อหาที่ส่งเข้า slot ด้วยโปรแกรม
การกระจายองค์ประกอบลูก
เบราว์เซอร์จัดการการกระจายทั้งหมดโดยอัตโนมัติ โดยอิงจากแอตทริบิวต์ slot ขององค์ประกอบลูกแต่ละรายการ ไม่ต้องมีขั้นตอน JavaScript เพิ่มเติม เพียงเขียน <span slot="footer">...</span> ไว้ในองค์ประกอบลูกจาก DOM ภายนอกของโฮสต์ แล้ว slot ที่สอดคล้องกันในทรีเงาจะบรรจุองค์ประกอบนั้น
slot กับการจัดสไตล์โฮสต์
สไตล์ของโฮสต์เอง ซึ่งกำหนดไว้บน <my-card> ในเอกสาร จะถูกส่งต่อแบบลำดับชั้นไปยังองค์ประกอบลูกจาก DOM ภายนอก รวมถึงองค์ประกอบที่ลงท้ายด้วยการถูกส่งเข้า slot ด้วย CSS ของทรีเงาผ่าน ::slotted มีความจำเพาะสูงกว่าสไตล์ของโฮสต์ที่สืบทอดมา เมื่อทั้งสองกำหนดเป้าหมายเป็นพร็อพเพอร์ตีเดียวกัน
กรณีการใช้งานทั่วไป
การ์ดที่มี slot สำหรับส่วนหัว เนื้อหา และส่วนท้าย กล่องโต้ตอบที่มี slot สำหรับชื่อ เนื้อหา และการดำเนินการ รายการที่มี slot สำหรับส่วนต้นและส่วนท้าย เมนูนำทางที่มี slot สำหรับรายการ slot ช่วยให้คัสตอมเอลิเมนต์ประกอบกันได้ในลักษณะเดียวกับ <details>/<summary> หรือ <table>/<tr>
ตรวจสอบความเข้าใจ
slot เริ่มต้นแตกต่างจาก slot ที่มีชื่ออย่างไร
สรุป
slot จะนำองค์ประกอบลูกจาก DOM ภายนอกไปแสดงในตำแหน่งเฉพาะภายในทรีเงา slot เริ่มต้นรับองค์ประกอบลูกที่ไม่มีชื่อ ส่วน slot ที่มีชื่อรับองค์ประกอบลูกที่มีแอตทริบิวต์ slot ตรงกัน เนื้อหาสำรองจะเติมลงใน slot ที่ว่างอยู่ ::slotted ใช้จัดสไตล์องค์ประกอบลูกโดยตรงที่ถูกส่งเข้า slot และเหตุการณ์ slotchange ใช้ตอบสนองต่อการอัปเดตเนื้อหาแบบไดนามิก
คำถามที่พบบ่อย
บทเรียน “องค์ประกอบ Slot สำหรับการกระจายเนื้อหา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “องค์ประกอบ Slot สำหรับการกระจายเนื้อหา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “องค์ประกอบ Slot สำหรับการกระจายเนื้อหา”
ส่งเนื้อหาของโฮสต์เข้า Shadow DOM ด้วยสล็อตที่มีชื่อและสล็อตเริ่มต้น คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “องค์ประกอบ Slot สำหรับการกระจายเนื้อหา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- attachShadow และ Shadow Root
- องค์ประกอบ Slot สำหรับการกระจายเนื้อหา
- สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM
- Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก