::slotted()
Псевдо-елемент ::slotted()
являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі Використання шаблонів і слотів).
Це працює тільки при використанні всередині CSS, поміщеного в тіньовий DOM. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.
/* Вибір будь-якого елемента, поміщеного в слот */
::slotted(*) {
font-weight: bold;
}
/* Вибір будь-якого <span> елемента, поміщеного в слот */
::slotted(span) {
font-weight: bold;
}
Синтакс
::slotted( <compound-selector-list> )where
<compound-selector-list> = <compound-selector>#
where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Приклади
Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента :slotted (див. демо).
У цьому демо ми використовуємо простий шаблон з трьома слотами:
<template id="person-template">
<div>
<h2>Personal ID Card</h2>
<slot name="person-name">NAME MISSING</slot>
<ul>
<li><slot name="person-age">AGE MISSING</slot></li>
<li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
</ul>
</div>
</template>
Кастомний веб-компонент— <person-details>
— визначений, як:
customElements.define('person-details',
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('person-template');
let templateContent = template.content;
const shadowRoot = this.attachShadow({mode: 'open'});
let style = document.createElement('style');
style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
'h2 { margin: 0 0 10px; }' +
'ul { margin: 0; }' +
'p { margin: 10px 0; }' +
'::slotted(*) { color: gray; font-family: sans-serif; } ';
shadowRoot.appendChild(style);
shadowRoot.appendChild(templateContent.cloneNode(true));
}
})
Ви побачите, що при заповненні елемента стилю
певними значеннями, ми вибираємо всі слотовані елементи (::slotted(*)
) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені.
Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *. Для прикладу - селектор, який застосує стилі лише для div
елементів, матиме наступний вигляд (::slotted(div)
). Більше інформації про стилізацію slot
елементів та розробку кастомних веб компонентів, ви можете знайти на моєму github.
При вставці на сторінку елемент виглядає наступним чином:
<person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details>
Cпецифікації
Specification | Status | Comment |
---|---|---|
CSS Scoping Module Level 1 The definition of '::slotted' in that specification. |
Working Draft | Початкове визначення |
Сумісність браузерами
BCD tables only load in the browser