:has-slotted
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
:has-slotted là lớp giả (pseudo-class) trong CSS, khớp khi nội dung của một phần tử <slot> không rỗng hoặc không sử dụng giá trị mặc định (xem Using templates and slots để biết thêm thông tin).
Note:
Ngay cả một nút văn bản khoảng trắng duy nhất cũng đủ để làm cho :has-slotted áp dụng.
Lớp giả này chỉ hoạt động khi được sử dụng bên trong CSS đặt trong một shadow DOM.
css
/* Selects the content of a <slot> element that has content that is not default */
:has-slotted {
color: green;
}
/* Selects the content of a <slot> element that has no content or default */
:not(:has-slotted) {
color: red;
}
Cú pháp
css
:has-slotted {
/* ... */
}
Ví dụ
Ví dụ này có hai phần tử <slot>, một phần tử đã được gán nội dung và phần tử còn lại thì chưa.
HTML
html
<p>
<template shadowrootmode="open">
<style>
:has-slotted {
color: rebeccapurple;
}
</style>
<slot name="one">Placeholder 1</slot>
<slot name="two">Placeholder 2</slot>
</template>
<span slot="one">Slotted content</span>
</p>
Kết quả
Phần tử <slot> đã được gán nội dung khớp với lớp giả :has-slotted và có giá trị color là rebeccapurple được áp dụng.
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Shadow Module Level 1 # the-has-slotted-pseudo |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<template> - Phần tử HTML
<slot> ::slotted