: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

В следующем 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 0 0 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();
});

Результат

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