--- title: '::slotted()' slug: 'Web/CSS/::slotted' translation_of: 'Web/CSS/::slotted' ---
Псевдо-елемент ::slotted()
являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі Використання шаблонів і слотів).
Це працює тільки при використанні всередині CSS, поміщеного в тіньовий DOM. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.
/* Вибір будь-якого елемента, поміщеного в слот */ ::slotted(*) { font-weight: bold; } /* Вибір будь-якого <span> елемента, поміщеного в слот */ ::slotted(span) { font-weight: bold; }
{{csssyntax}}
Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента :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>
Specification | Status | Comment |
---|---|---|
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }} | {{ Spec2('CSS Scope') }} | Початкове визначення |
{{Compat("css.selectors.slotted")}}