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.
Defining components before usage is important for reliability. If markup is rendered before the browser knows the custom element definition, upgrade timing can become race-prone and appear flaky across environments.
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.