Articles
Giới thiệu về JavaScript
Shadow DOM là gì?

Shadow DOM là gì?

Bài viết này giải thích Shadow DOM là gì.

YouTube Video

Hiểu về Shadow DOM

Shadow DOM là một tính năng mạnh mẽ của chuẩn Web Components, cho phép đóng gói các kiểu dáng (styles) và cấu trúc DOM trong các thành phần. Tính năng này ngăn chặn sự xung đột giữa các kiểu dáng và script của các thành phần và tài liệu chính.

Shadow DOM là gì?

Shadow DOM cung cấp một cách tạo cây DOM phân vùng liên kết với một phần tử DOM thông thường. Cây Shadow này được cách ly khỏi tài liệu tổng thể, nơi các kiểu dáng và script bên ngoài không tác động đến nó, cũng như các kiểu dáng và script bên trong không bị rò rỉ ra ngoài.

Ví dụ, nếu bạn tạo một thành phần nút bấm tùy chỉnh sử dụng Shadow DOM, các kiểu dáng của nó sẽ không ảnh hưởng đến các phần tử khác trên trang web. Tương tự, các phần tử có cùng tên class sẽ không bị xung đột.

Lợi ích của Shadow DOM

  1. Đóng gói: Shadow DOM tách biệt các kiểu dáng và chức năng, giúp ngăn ngừa xung đột với các kiểu dáng và script toàn cục.

  2. Tái sử dụng: Các thành phần được xây dựng với Shadow DOM có thể được sử dụng lại trong các dự án khác mà không lo ngại về xung đột kiểu dáng.

  3. Dễ bảo trì: Đóng gói cho phép các thành phần tự quản lý về logic và kiểu dáng, giúp việc gỡ lỗi và bảo trì trở nên dễ dàng hơn.

Tạo Shadow DOM

Để sử dụng Shadow DOM, bạn cần gắn một shadow root vào một phần tử HTML. Dưới đây là một ví dụ đơn giản:.

 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`;

Giải thích

  1. Phần tử Gốc: Một phần tử DOM thông thường, nơi shadow root được gắn (trong trường hợp này là #shadow-host).

  2. Shadow Root: Gốc của cây shadow được tạo ra bằng cách sử dụng attachShadow.

  3. Chế độ: Trong chế độ open, JavaScript bên ngoài có thể truy cập shadow root thông qua element.shadowRoot. Ngược lại, chế độ closed không cho phép truy cập.

Tạo kiểu trong Shadow DOM

Shadow DOM có phạm vi kiểu dáng riêng của nó. Các kiểu dáng được định nghĩa bên trong cây bóng chỉ áp dụng cho các phần tử bên trong cây đó. Dưới đây là một ví dụ:.

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

Ngay cả khi có xung đột kiểu dáng trong tài liệu chính, các đoạn văn bên trong cây bóng vẫn không bị ảnh hưởng:

 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>

Các đoạn văn bên trong Shadow DOM vẫn giữ màu xanh lá cây, trong khi các đoạn văn bên ngoài có màu đỏ.

Các sự kiện bên trong Shadow DOM

Các sự kiện bên trong Shadow DOM tương tự như các sự kiện DOM thông thường nhưng có thể hoạt động khác biệt về mặt lan truyền do tính đóng gói. Các sự kiện xảy ra trong cây bóng có thể bong bóng lên tới phần tử chủ, nhưng không bong bóng trực tiếp tới toàn bộ tài liệu.

Dưới đây là một ví dụ:

 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});

Khi nút được nhấn, cả hai trình nghe đều được kích hoạt, minh họa hành vi của sự kiện bong bóng.

Slots: Phân phối nội dung Light DOM

Các slot cho phép bạn truyền nội dung từ Light DOM vào trong Shadow DOM. Dưới đây là một ví dụ:.

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

Trong tài liệu chính, bạn có thể làm như sau:

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

Các phần tử slot bên trong Shadow DOM hiển thị nội dung Light DOM với thuộc tính slot tương ứng.

Kết luận

Shadow DOM là một công cụ quan trọng để xây dựng các thành phần web mạnh mẽ, có thể tái sử dụng và dễ duy trì. Bằng cách đóng gói kiểu dáng và chức năng, nó giảm khả năng xung đột và đơn giản hóa việc quản lý mã nguồn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

JavaScript và HTML