CSS селектор ::slotted() — стилі для вмісту слота

CSS псевдоелемент ::slotted() дозволяє стилям усередині тіньового DOM дотягнутися до вмісту, вставленого ззовні через <slot>.

правити

Загальний опис

Тіньовий DOM ізольований: зовнішні стилі не проникають усередину, а внутрішні — назовні. Але вміст слота приходить із зовнішнього документа й лишається йому належати.

::slotted() — це вузьке віконце, крізь яке компонент може задати вигляд переданим елементам. Працює лише на верхньому рівні вставленого вмісту: до нащадків не дотягнеться.

правити

Нотатка

Селектор у дужках має бути простим (compound): ::slotted(span.title) — можна, ::slotted(div span) — ні.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

::slotted(<compound-selector>)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
slotted	53+	63+	10+	40+	79+	-

Підтримка: мобільні переглядачі

Переглядач
slotted	53+	yes	yes	10+

Приклади

+ запропонувати свій приклад у пісочниці

<my-box>
    <h2>Переданий заголовок</h2>
</my-box>

customElements.define('my-box', class extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' }).innerHTML = `
            <style>
                ::slotted(h2) { color: #0172ad; margin: 0; }
            </style>
            <slot></slot>
        `;
    }
});