<slot>: Phần tử slot của Web Component
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.
Phần tử <slot> trong HTML — là một phần của bộ công nghệ Web Components — là chỗ giữ chỗ bên trong web component mà bạn có thể điền vào bằng đánh dấu riêng của mình, cho phép bạn tạo các cây DOM riêng biệt và trình bày chúng cùng nhau.
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
name-
Tên của slot. Khi component chứa slot được hiển thị, slot được hiển thị với con của custom element có thuộc tính
slotphù hợp. Named slot là phần tử<slot>với thuộc tínhname. Các slot không có tên mặc định là chuỗi rỗng. Tên phải là duy nhất cho mỗi shadow root: nếu bạn có hai slot với cùng tên, tất cả các phần tử có thuộc tínhslotphù hợp sẽ được gán cho slot đầu tiên có tên đó.
Ví dụ
<template id="element-details-template">
<style>
details {
font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif;
}
.name {
font-weight: bold;
color: #217ac0;
font-size: 120%;
}
h4 {
margin: 10px 0 -8px 0;
background: #217ac0;
color: white;
padding: 2px 6px;
border: 1px solid #cee9f9;
border-radius: 4px;
}
.attributes {
margin-left: 22px;
font-size: 90%;
}
.attributes p {
margin-left: 16px;
font-style: italic;
}
</style>
<details>
<summary>
<code class="name">
<<slot name="element-name">NEED NAME</slot>>
</code>
<span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
</summary>
<div class="attributes">
<h4>Attributes</h4>
<slot name="attributes"><p>None</p></slot>
</div>
</details>
<hr />
</template>
Note: Bạn có thể xem ví dụ đầy đủ này hoạt động tại element-details (xem nó chạy trực tiếp). Ngoài ra, bạn có thể tìm phần giải thích tại Using templates and slots.
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung diễn đạt |
|---|---|
| Nội dung được phép | Trong suốt |
| Sự kiện | slotchange |
| Bỏ thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung diễn đạt |
| Vai trò ARIA ngầm định | Không có vai trò tương ứng |
| Vai trò ARIA được phép | Không có role nào được phép |
| Giao diện DOM | HTMLSlotElement |
Đặc tả
| Specification |
|---|
| HTML # the-slot-element |
| DOM # shadow-tree-slots |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<template> - Thuộc tính HTML
slot - Phần tử giả CSS
::slotted - Lớp giả CSS
:has-slotted - Mô-đun CSS scoping