:defined
:defined CSS 伪类表示任何已定义的元素。这包括浏览器内置的标准元素以及已成功定义的自定义元素（即，通过 CustomElementRegistry.define() 方法定义的元素）。
css
/* Selects any defined element */
:defined {
font-style: italic;
}
/* Selects any instance of a specific custom element */
custom-element:defined {
display: block;
}
语法
css
:defined {
/* ... */
}
示例
在元素定义前隐藏它们
在这个演示中，我们定义了一个名为 <custom-element> 的基本自定义元素，并使用 :not(:defined) 和 :defined 选择器来在元素定义前和定义后对其进行样式设置。如果你的自定义元素很复杂，加载到页面需要一段时间，这会很有用——你可能希望在定义完成之前隐藏元素的实例，这样你就不会在页面上看到丑陋的未样式化元素的闪烁。
HTML
以下 HTML 代码使用了自定义元素，但该元素尚未定义。我们还包含了一个 <button>，点击它将定义自定义元素，让你可以在定义前和定义后查看其状态。
html
<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><custom-element></code></button>
CSS
在下面的 CSS 中，我们使用 custom-element:not(:defined) 选择器来选择元素并在其未定义时将其着色为灰色，而使用 custom-element:defined 选择器来选择元素并在其定义后将其着色为黑色。
css
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;
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 伪元素来显示“Loading...”叠加消息，直到元素被定义。定义后，通过将 content 设置为空字符串将其删除。
以下 JavaScript 已用于定义自定义元素。为了让您在定义前和定义后查看自定义元素的状态，我们会在点击按钮时运行 define() 方法。
js
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
customElements.define("custom-element", class extends HTMLElement {});
btn.remove();
});
结果
规范
| 规范 |
|---|
| HTML # selector-defined |
| 选择器 Level 4 # defined-pseudo |
浏览器兼容性
加载中…