Псевдокласс CSS `:defined`

:defined CSS — это псевдокласс, который соответствует любому определённому элементу. К таким элементам относятся стандартные элементы, встроенные в браузер, и пользовательские элементы, которые были успешно определены (то есть с помощью метода CustomElementRegistry.define()).

/* Selects any defined element */
:defined {
  font-style: italic;
}

/* Selects any instance of a specific custom element */
custom-element:defined {
  display: block;
}

Синтаксис

:defined {
  /* ... */
}

Примеры

Скрытие элементов до их определения

В этом примере мы определяем базовый пользовательский элемент с именем <custom-element> и используем селекторы :not(:defined) и :defined, чтобы стилизовать элемент до и после его определения. Это полезно, если у вас есть сложный пользовательский элемент, загрузка которого на страницу занимает некоторое время: можно скрыть экземпляры элемента до завершения определения, чтобы на странице не появлялись некрасивые неоформленные элементы.

HTML

В приведённом ниже HTML-коде используется пользовательский элемент, который ещё не определён. Мы также добавляем <button>, при нажатии на которую пользовательский элемент будет определён. Это позволит увидеть его состояние до и после определения.

<custom-element>
  <p>
    Loaded content: Lorem ipsum tel sed tellus eiusmod tellus. Aenean. Semper
    dolor sit nisi. Elit porttitor nisi sit vivamus.
  </p>
</custom-element>

<button id="btn">define the <code>&lt;custom-element&gt;</code></button>

CSS

custom-element {
  display: block;
  border: 5px dashed grey;
  border-radius: 1rem;
  height: 100px;
  width: 400px;
  padding: 1rem;
  position: relative;
  user-select: none;
}

code {
  background: #cccccc;
}

#btn {
  margin-top: 1rem;
  cursor: pointer;
}

В следующем CSS мы используем селектор custom-element:not(:defined), чтобы выбрать элемент и окрасить его в серый цвет, пока он не определён, и селектор custom-element:defined, чтобы выбрать элемент и окрасить его в чёрный цвет после определения.

custom-element:not(:defined) {
  border-color: grey;
  color: grey;
}

custom-element:defined {
  background-color: wheat;
  border-color: black;
  color: black;
}

/* show loading message */
custom-element:not(:defined)::before {
  content: "Loading...";
  position: absolute;
  inset: 0;
  align-content: center;
  text-align: center;
  font-size: 2rem;
  background-color: white;
  border-radius: 1rem;
}

/* remove the loading message */
custom-element:defined::before {
  content: "";
}

Мы также использовали псевдоэлемент ::before, чтобы показывать сообщение «Загрузка…» поверх элемента до его определения. После определения сообщение удаляется, если присвоить свойству content пустую строку.

Следующий JavaScript используется для определения пользовательского элемента. Чтобы можно было увидеть состояние пользовательского элемента до и после определения, мы вызываем метод define() при нажатии кнопки.

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  customElements.define("custom-element", class extends HTMLElement {});
  btn.remove();
});

Результат

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

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

См. также

• Веб-компоненты