Transforming components to custom elements involves two major steps,
-
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 implementsNgElementConstructor
interface, and creates a constructor class which is used to produce a self-bootstrapping instance of Angular component. -
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’sCustomElementRegistry
. When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.