: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 |
瀏覽器相容性
載入中…