В процессе перевода.

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

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

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

Синтаксис

:defined

Примеры

Этот пример включает скрипт, определяющий пользовательский элемент <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 Status Comment
HTML Living Standard
Определение ':defined' в этой спецификации.
Живой стандарт  

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge ? Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 63Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, ialexi-bl
Обновлялась последний раз: mdnwebdocs-bot,