Function registerComponent

Example

class MyComponent extends HTMLElement {}
await registerComponent('my-component', MyComponent)
Copy

Another convention is to have a static async register() function in the Custom Component.

export class MyComponent extends HTMLElement {
    static async register() {
        return registerComponent('my-component', MyComponent)
    }
}
Copy

That way, you can import multiple components and do a Promise.all() on all their .register()s.

import { MyComponent, YourComponent, TheirComponent } ...
await Promise.all([
    MyComponent.register(),
    YourComponent.register(),
    TheirComponent.register(),
])

@throws {TypeError} If name is not a string or constructor is not a function
@see {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define | customElements.define}
@see {@link https:
Copy