这篇翻译不完整。请帮忙从英语翻译这篇文章

: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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support 63IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 63Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

参见

文档标签和贡献者

此页面的贡献者: sisibeloved, forever_youyou
最后编辑者: sisibeloved,