:defined
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
CSS псевдокласс :defined
находит любой элемент, который был определён, включая любой стандартный элемент, встроенный в браузер, и пользовательские элементы (то есть определённые с помощью метода CustomElementRegistry.define()
).
/* Находит любой элемент, который был определён */
:defined {
font-style: italic;
}
/* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */
simple-custom:defined {
display: block;
}
Синтаксис
Примеры
Этот пример включает скрипт, определяющий пользовательский элемент <simple-custom>
:
customElements.define(
"simple-custom",
class extends HTMLElement {
constructor() {
super();
let divElem = document.createElement("div");
divElem.textContent = this.getAttribute("text");
let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
}
},
);
Затем мы используем короткий HTML код с элементом <simple-custom>
и стандартным элементом <p>
:
<simple-custom text="Текст пользовательского элемента"></simple-custom>
<p>Пример текста стандартного параграфа</p>
Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор :defined
, чтобы поменять шрифт всех определённых элементов на курсив.
/* Определение разных фонов для разных элементов */
p {
background: yellow;
}
simple-custom {
display: block;
background: cyan;
}
/* И пользовательский, и встроенный элементы будет отображены курсивом */
:defined {
font-style: italic;
}
Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:
simple-custom:not(:defined) {
opacity: 0;
}
simple-custom:defined {
opacity: 0.75;
text-decoration: underline;
}
Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не стилизованные элементы.
результат
Вот результат выполнения представленного выше кода:
Спецификации
Specification |
---|
HTML Standard # selector-defined |
Совместимость с браузерами
BCD tables only load in the browser