Shadow DOM คืออะไร?

บทความนี้จะอธิบายว่า Shadow DOM คืออะไร

YouTube Video

การทำความเข้าใจกับ Shadow DOM

Shadow DOM เป็นฟีเจอร์สำคัญของมาตรฐาน Web Components ที่ช่วยให้สามารถแคปซูลสไตล์และโครงสร้าง DOM ภายในคอมโพเนนต์ได้ ฟีเจอร์นี้ช่วยป้องกันการรบกวนระหว่างสไตล์และสคริปต์ของคอมโพเนนต์และเอกสารหลัก

Shadow DOM คืออะไร?

Shadow DOM ช่วยสร้างโดมที่มีขอบเขตเฉพาะ ซึ่งเชื่อมโยงกับองค์ประกอบ DOM ปกติ Shadow tree นี้ถูกแยกออกจากเอกสารโดยรวม ซึ่งสไตล์และสคริปต์ภายนอกจะไม่ส่งผลต่อมัน และสไตล์และสคริปต์ภายในก็จะไม่รั่วไหลออกไปเช่นกัน

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

ข้อดีของ Shadow DOM

1. การแคปซูล: Shadow DOM แยกสไตล์และฟังก์ชันออกจากกัน ป้องกันความขัดแย้งกับสไตล์และสคริปต์แบบโกลบอล

2. การใช้ซ้ำ: คอมโพเนนต์ที่สร้างด้วย Shadow DOM สามารถนำไปใช้ซ้ำในโปรเจกต์ต่างๆ ได้โดยไม่ต้องกังวลเรื่องความขัดแย้งของสไตล์

3. ความง่ายต่อการดูแล: การแคปซูลช่วยให้คอมโพเนนต์ถูกแยกเป็นอิสระทั้งในแง่ของตรรกะและสไตล์ ทำให้การดีบักและการดูแลง่ายขึ้น

การสร้าง Shadow DOM

ในการใช้ Shadow DOM คุณจำเป็นต้องแนบ shadow root เข้ากับองค์ประกอบ HTML ตัวอย่างง่ายๆ ดังนี้:

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

คำอธิบาย

1. องค์ประกอบโฮสต์: องค์ประกอบ DOM ธรรมดาที่แนบ shadow root ไว้ (ในกรณีนี้คือ #shadow-host)

2. Shadow Root: รากของ shadow tree ที่สร้างขึ้นโดยใช้ attachShadow

3. โหมด: ในโหมด open JavaScript ภายนอกสามารถเข้าถึง shadow root ผ่านทาง element.shadowRoot ในทางกลับกัน โหมด closed ไม่อนุญาตให้มีการเข้าถึง

การจัดสไตล์ภายใน Shadow DOM

Shadow DOM มีขอบเขตสไตล์ของตัวเอง สไตล์ที่กำหนดใน shadow tree มีผลเฉพาะกับองค์ประกอบภายใน tree นั้น นี่คือตัวอย่าง:

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

แม้ว่าจะมีสไตล์ที่ขัดแย้งในเอกสารหลัก แต่ย่อหน้าภายใน shadow tree จะไม่ได้รับผลกระทบ:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

ย่อหน้าภายใน Shadow DOM จะยังคงเป็นสีเขียว ในขณะที่ย่อหน้าภายนอกเป็นสีแดง

เหตุการณ์ภายใน Shadow DOM

เหตุการณ์ภายใน Shadow DOM คล้ายกับเหตุการณ์ใน DOM ทั่วไป แต่อาจทำงานแตกต่างกันในแง่ของการแพร่กระจายเนื่องจากการห่อหุ้ม เหตุการณ์ที่เกิดขึ้นภายใน shadow tree สามารถแพร่กระจายขึ้นไปยังโฮสต์ขององค์ประกอบได้ แต่จะไม่แพร่กระจายไปยังเอกสารทั้งหมดโดยตรง

นี่คือตัวอย่าง:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

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

สล็อต: การกระจายเนื้อหา Light DOM

สล็อตช่วยให้คุณโยงเนื้อหาจาก Light DOM ไปยัง Shadow DOM ได้ นี่คือตัวอย่าง:

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

ในเอกสารหลัก คุณสามารถทำได้ดังนี้:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

องค์ประกอบ slot ภายใน Shadow DOM จะแสดงเนื้อหา Light DOM ตามคุณสมบัติ slot ที่เกี่ยวข้อง

สรุป

Shadow DOM เป็นเครื่องมือสำคัญสำหรับการสร้างส่วนประกอบเว็บที่แข็งแกร่ง ใช้งานซ้ำได้ และดูแลง่าย โดยการห่อหุ้มสไตล์และฟังก์ชันการทำงาน มันช่วยลดความเป็นไปได้ของการขัดแย้งและทำให้การจัดการโค้ดง่ายขึ้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video