Element: thuộc tính assignedSlot

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.

Thuộc tính chỉ đọc assignedSlot của giao diện Element trả về một HTMLSlotElement đại diện cho phần tử <slot> mà nút được chèn vào.

Giá trị

Một instance HTMLSlotElement, hoặc null nếu phần tử không được gán vào một slot, hoặc nếu shadow root liên quan được gắn với mode đặt là closed (xem Element.attachShadow để biết thêm chi tiết).

Ví dụ

Trong ví dụ simple-template của chúng tôi (xem trực tiếp), chúng tôi tạo một phần tử tùy chỉnh đơn giản gọi là <my-paragraph> trong đó một shadow root được gắn vào và sau đó được điền nội dung bằng cách sử dụng nội dung của một template có chứa một slot tên là my-text.

Khi <my-paragraph> được sử dụng trong tài liệu, slot được điền bởi một phần tử có thể slot bằng cách bao gồm nó bên trong phần tử với thuộc tính slot có giá trị my-text. Đây là một ví dụ:

html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

Trong tệp JavaScript, chúng ta lấy tham chiếu đến <span> như hiển thị ở trên, sau đó ghi nhật ký tham chiếu đến phần tử <slot> ban đầu mà <span> được chèn vào.

js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'

Đặc tả kỹ thuật

Specification
DOM
# dom-slotable-assignedslot

Trình duyệt hỗ trợ