CSS селектор :defined — зареєстрований кастомний елемент

CSS псевдоклас :defined вибирає елементи, які браузер уже знає: вбудовані теги та зареєстровані кастомні елементи.

правити

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

Головна користь — у зворотному вигляді: my-widget:not(:defined) вибирає кастомний елемент, скрипт якого ще не завантажився.

Це дає змогу сховати «сирий» компонент або показати заглушку, доки він не ожив — і уникнути мигання нестилізованого вмісту.

правити

Порада

Ховай нерозпізнані компоненти через :not(:defined), а не через клас із JavaScript: CSS спрацює раніше, ще до виконання скриптів.

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

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

Синтаксис

:defined

Переглядачі

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

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

Переглядач
defined	54+	63+	10+	41+	79+	-

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

Переглядач
defined	54+	yes	yes	10+

Приклади

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

<my-chart data="..."></my-chart>

my-chart:not(:defined) {
    display: block;
    min-height: 200px;
    background: repeating-linear-gradient(45deg, #f2f2f2 0 10px, #e9e9e9 10px 20px);
}