:defined

CSS の :defined 疑似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 (CustomElementRegistry.define() メソッドを使用して) 定義に成功したカスタム要素が含まれます。

/* 定義されたすべての要素を選択 */
:defined {
  font-style: italic;
}

/* specific custom 要素のすべてのインスタンスを選択 */
simple-custom:defined {
  display: block;
}

構文

:defined

例

以下のスニペットは defined-pseudo-class のデモから取ったものです (ライブで見るにはこちら)。

このデモでは、とても簡単で小さなカスタム要素を定義しています。

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);
  }
})

それからこの要素のコピーを、標準の <p> と一緒に文書に挿入します。

<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>

CSS にはまず以下のルールを入れます。

// 2つの要素を背景で区別できるようにする
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// カスタム要素と組み込み要素を両方イタリック体にする
:defined {
  font-style: italic;
}

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• ウェブコンポーネント