: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()).

css
/* Находит любой элемент, который был определён */
:defined {
  font-style: italic;
}

/* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */
simple-custom:defined {
  display: block;
}

Синтаксис

Error: could not find syntax for this item

Примеры

Этот пример включает скрипт, определяющий пользовательский элемент <simple-custom>:

js
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>:

html
<simple-custom text="Текст пользовательского элемента"></simple-custom>

<p>Пример текста стандартного параграфа</p>

Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор :defined, чтобы поменять шрифт всех определённых элементов на курсив.

css
/* Определение разных фонов для разных элементов */
p {
  background: yellow;
}

simple-custom {
  display: block;
  background: cyan;
}

/* И пользовательский, и встроенный элементы будет отображены курсивом */
:defined {
  font-style: italic;
}

Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:

css
simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}

Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не стилизованные элементы.

результат

Вот результат выполнения представленного выше кода:

Спецификации

Specification
HTML
# selector-defined
Selectors Level 4
# defined-pseudo

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:defined

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также