Custom Elements in OneCX
Overview
This article explains how Custom Elements are used in OneCX to dynamically render microfrontend content by binding UI components to HTML elements. It describes the role of the Shell UI, Application Store, and microfrontends in loading, registering, and displaying content using the Web Component approach.
How It Works
-
Custom Elements - Custom Elements are part of the Web Components technology. It is a set of tools used to achieve the binding between components and HTML elements.
-
Configuration - OneCX platform will create HTML elements specified via configuration whenever a module or Remote Component has to be displayed on a page.
-
Content loading in OneCX - There are 2 steps that OneCX platform takes when dealing with content loading with Webcomponent expose method:
-
Load exposed content via Module Federation into memory
-
Create an HTML element on a page to which exposed content should be bound
-
-
Responsibility of Microfrontend - In the Microfrontend content loading, it was mentioned that when exposing Microfrontend content, files specified per content should take care of all setup needed to display it.
-
Custom Element Registration - With Webcomponent method, those files need to contain source code, which will register the Custom Element in the Custom Elements Registry.
-
Binding Components to Elements - a file used for content loading needs to use Web Components to assign some component to the HTML element that OneCX platform will render.
-
Rendering - When OneCX platform creates this HTML element on a page, the Custom Elements Registry will use the assigned component and display it on a page.