The custom element name. Supports kebab-case or PascalCase and normalizes to kebab-case.
The custom element constructor/class.
Optionaloptions: ElementDefinitionOptionsOptional native customElements.define options.
A promise resolving to true if already defined, false if defined by this call.
Note that the component name should contain a hyphen to be valid. Define the component before usage to avoid FOUC (Flash of Unstyled Content).
class MyComponent extends HTMLElement {}
await defineComponent('my-component', MyComponent)
A common pattern is exposing a static defined promise on the component class.
export class MyComponent extends HTMLElement {
static defined = defineComponent('my-component', MyComponent)
}
That way, importers can await readiness declaratively and in parallel.
import { MyComponent, YourComponent, TheirComponent } ...
await Promise.all([
MyComponent.defined,
YourComponent.defined,
TheirComponent.defined,
])
Registers the custom element with the browser and waits till it is defined.