:defined
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
CSS псевдокласс :defined находит любой элемент, который был определён, включая любой стандартный элемент, встроенный в браузер, и пользовательские элементы (то есть определённые с помощью метода CustomElementRegistry.define()).
/* Находит любой элемент, который был определён */ :defined { font-style: italic; } /* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */ simple-custom:defined { display: block; } Синтаксис
Error: could not find syntax for this itemПримеры
Этот пример включает скрипт, определяющий пользовательский элемент <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 # selector-defined |
| Selectors Level 4 # defined-pseudo |
Совместимость с браузерами
Loading…