CSS селектор ::part() — стилізація частин компонента ззовні

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

автор: NagarD

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

Це договір між автором компонента і його користувачем. Компонент каже: «оці елементи я дозволяю тобі фарбувати» — і позначає їх атрибутом part="label". Усе інше лишається схованим.

На відміну від ::slotted(), тут стилі йдуть ззовні всередину, а не навпаки.

автор: NagarD

Синтаксис

::part(<ident>)

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
part	73+	72+	13.1+	60+	79+	-

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

Приклади

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

Зовнішній стиль для відкритої частини компонента.

HTML

<my-input></my-input>

CSS

my-input::part(label) {
    color: #0172ad;
    font-weight: bold;
}

customElements.define('my-input', class extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' }).innerHTML = `
            <label part="label">Підпис, відкритий для стилізації</label>
            <input>
        `;
    }
});

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!