How to transfer components to custom elements?

Transforming components to custom elements involves two major steps,

1. Build custom element class: Angular provides the createCustomElement() function for converting an Angular component (along with its dependencies) to a custom element. The conversion process implements NgElementConstructor interface, and creates a constructor class which is used to produce a self-bootstrapping instance of Angular component.
2. Register element class with browser: It uses customElements.define() JS function, to register the configured constructor and its associated custom-element tag with the browser's CustomElementRegistry. When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.

The detailed structure would be as follows,

Practical Code Example

// Transferring Angular Component to Custom Element:
const CustomWidget = createCustomElement(WidgetComponent, { injector });
customElements.define('custom-widget', CustomWidget);