Element: phương thức attachShadow()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Phương thức attachShadow() của giao diện Element gắn một shadow root vào một phần tử cụ thể.

Cú pháp

attachShadow(init)

Tham số

init : Một đối tượng có chứa các thuộc tính sau:

mode : Một chuỗi chỉ định chế độ đóng gói cho shadow DOM. Giá trị có thể là: - "open": Cho phép truy cập vào các phần tử của shadow root từ JavaScript bên ngoài, sử dụng Element.shadowRoot. - "closed": Đóng shadow root và không cho phép truy cập từ bên ngoài.

delegatesFocus Optional : Một giá trị boolean chỉ định xem có ủy quyền tập trung cho các phần tử con hay không.

slotAssignment Optional : Một chuỗi chỉ định cách các slot được gán. Giá trị mặc định là "named".

class MyElement extends HTMLElement {
  constructor() {
    super();
    // Gắn shadow root với chế độ mở
    const shadow = this.attachShadow({ mode: "open" });
    
    // Thêm nội dung vào shadow DOM
    shadow.innerHTML = `
      <style>
        p { color: blue; }
      </style>
      <p>Nội dung shadow DOM</p>
    `;
  }
}

customElements.define("my-element", MyElement);