:defined pseudo-class
:defined provides a styling hook for changing the custom-element on whether customElements.define() got called on that element.
html
<slow-element>This is stale content</slow-element><slow-element>This is stale content</slow-element>css
slow-element:not(:defined) {
opacity: 0.1;
}
slow-element:defined {
opacity: 1;
}slow-element:not(:defined) {
opacity: 0.1;
}
slow-element:defined {
opacity: 1;
}js
const template = document.createElement("template");
template.innerHTML = `
<div>Custom Element now defined</div>
`;
class SlowElement extends HTMLElement {
constructor() {
super();
let templateContent = template.content;
this._shadowRoot = this.attachShadow({ mode: "open" });
this._shadowRoot.appendChild(templateContent.cloneNode(true));
}
connectedCallback() {}
}
setTimeout(() => {
customElements.define("slow-element", SlowElement);
}, 2000);const template = document.createElement("template");
template.innerHTML = `
<div>Custom Element now defined</div>
`;
class SlowElement extends HTMLElement {
constructor() {
super();
let templateContent = template.content;
this._shadowRoot = this.attachShadow({ mode: "open" });
this._shadowRoot.appendChild(templateContent.cloneNode(true));
}
connectedCallback() {}
}
setTimeout(() => {
customElements.define("slow-element", SlowElement);
}, 2000);