:defined - CSS（层叠样式表） 编辑

:defined CSS 伪类 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 (例如通过 CustomElementRegistry.define() 方法)。

/* 选择所有已定义的元素 */
:defined {
  font-style: italic;
}

/* 选择指定自定义元素的任何实例 */
simple-custom:defined {
  display: block;
}

语法

:defined

示例

下面的片段摘自我们的 定义伪类 demo (点击查看源码).

在这个 demo 中我们定义了一个非常简单的自定义元素:

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 中我们首先包含以下规则:

// 为两个元素设置不同的背景色
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// 将自定义元素和内置元素的字体都设为斜体
:defined {
  font-style: italic;
}

 

然后提供以下两个规则来隐藏未定义的自定义元素的所有实例，并显示被定义为块级元素的实例：

 

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

simple-custom:defined {
  display: block;
}

这在你有一个复杂的自定义元素需要一段时间才能加载到页面中时非常有用 —— 你可能想要隐藏元素的实例直到定义完成为止，这样你就不会在页面上出现一些难看的元素。

说明

Specification	Status	Comment
HTML Living Standard :defined	Living Standard

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Web components