JavaScript Academy · บทเรียน

แม่แบบและสล็อต

ประกอบคอมโพเนนต์ด้วยแม่แบบและสล็อต

แม่แบบและสล็อต เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

องค์ประกอบเทมเพลต

องค์ประกอบ <template> ใช้เก็บ HTML ที่ไม่ทำงาน ซึ่งถูกแยกวิเคราะห์แล้วแต่ยังไม่ถูกแสดงผล เนื้อหาจะยังไม่เข้าไปอยู่ในหน้าจนกว่าคุณจะโคลนและแทรกเนื้อหานั้น จึงเหมาะอย่างยิ่งสำหรับมาร์กอัปที่นำกลับมาใช้ใหม่

การเข้าถึงเนื้อหาเทมเพลต

องค์ประกอบลูกของเทมเพลตอยู่ในคุณสมบัติ .content ซึ่งเป็น DocumentFragment สคริปต์ รูปภาพ และสไตล์ภายในจะยังไม่ทำงานหรือโหลดจนกว่าจะถูกแทรก

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

การโคลนเทมเพลต

ใช้ importNode หรือ cloneNode(true) เพื่อคัดลอกเนื้อหาเทมเพลต แล้วจึงแทรกโคลน การโคลนช่วยให้สร้างสำเนาจำนวนมากได้อย่างประหยัด

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

เทมเพลตภายในคอมโพเนนต์

องค์ประกอบกำหนดเองมักกำหนดเทมเพลตไว้ครั้งเดียว แล้วโคลนเข้าไปใน root ของ DOM เงาสำหรับแต่ละอินสแตนซ์ วิธีนี้เร็วกว่าการแยกวิเคราะห์สตริง HTML ใหม่ทุกครั้ง

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

Slot คืออะไร

<slot> คือพื้นที่สำรองภายในต้นไม้เงา ซึ่งเนื้อหาลูกขององค์ประกอบเอง (หรือ DOM แบบปกติ) จะถูกนำมาแสดง วิธีนี้ทำให้ผู้ใช้ส่งเนื้อหาที่กำหนดเองเข้าไปในคอมโพเนนต์ของคุณได้

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

เนื้อหา Slot เริ่มต้น

เนื้อหาที่วางไว้ระหว่างแท็ก <slot> จะทำหน้าที่เป็นเนื้อหาสำรอง โดยจะแสดงเฉพาะเมื่อผู้ใช้ไม่ได้ส่งเนื้อหาที่ตรงกันมา

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Slot ที่มีชื่อ

คุณสามารถใช้ slot หลายรายการร่วมกันได้ด้วยแอตทริบิวต์ name องค์ประกอบลูกใน DOM แบบปกติจะกำหนดเป้าหมายไปยัง slot ด้วยแอตทริบิวต์ slot

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

Slot เริ่มต้น (ไม่มีชื่อ)

slot ที่ไม่มี name คือ slot เริ่มต้น องค์ประกอบลูกใดก็ตามที่ไม่มีแอตทริบิวต์ slot จะถูกนำมาแสดงที่นี่ คุณสามารถใช้ slot เริ่มต้นหนึ่งรายการร่วมกับ slot ที่มีชื่อหลายรายการได้

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

การกำหนดสไตล์ให้เนื้อหาใน Slot

ใช้องค์ประกอบเทียม ::slotted() เพื่อกำหนดสไตล์ให้กับองค์ประกอบลูกที่ถูกนำมาแสดงจากภายในสไตล์ของ DOM เงา ตัวเลือกนี้จะตรงกับโหนดใน slot ระดับบนสุดเท่านั้น

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

เหตุการณ์การเปลี่ยนแปลงของ Slot

slot จะส่งเหตุการณ์ slotchange เมื่อโหนดที่กำหนดให้มีการเปลี่ยนแปลง ให้รับฟังเหตุการณ์นี้เพื่อตอบสนองเมื่อผู้ใช้เพิ่มหรือนำเนื้อหาที่ถูกนำมาแสดงออก

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

เทมเพลตและ Slot ทำงานร่วมกัน

เทมเพลตกำหนดโครงสร้างไว้ครั้งเดียว ส่วน slot ทำให้โครงสร้างนั้นยืดหยุ่นด้วยการเปิดให้ผู้ใช้คอมโพเนนต์แทรกเนื้อหาของตนเอง ทั้งสองอย่างร่วมกันช่วยขับเคลื่อนคอมโพเนนต์เว็บที่สะอาด นำกลับมาใช้ใหม่ได้ และปรับแต่งได้

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับเทมเพลตและ slot

ทบทวน

คุณได้เรียนรู้เกี่ยวกับเทมเพลตและ slot ดังนี้

<template> ใช้เก็บมาร์กอัปที่ไม่ทำงานและนำกลับมาใช้ใหม่ได้ใน .content
โคลนด้วย cloneNode(true) ก่อนแทรก
<slot> นำ DOM แบบปกติเข้ามาแสดงในต้นไม้เงา
slot ที่มีชื่อใช้ name ร่วมกับแอตทริบิวต์ slot ขององค์ประกอบลูก
::slotted() ใช้กำหนดสไตล์ให้โหนดที่นำมาแสดง ส่วน slotchange ใช้ตอบสนองต่อการอัปเดต

คุณเรียนจบเรื่องคอมโพเนนต์เว็บแล้ว ถัดไปคือ API IntersectionObserver

คำถามที่พบบ่อย

บทเรียน “แม่แบบและสล็อต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แม่แบบและสล็อต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แม่แบบและสล็อต”

ประกอบคอมโพเนนต์ด้วยแม่แบบและสล็อต คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “แม่แบบและสล็อต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy