Introduction
In the next following blog post series, I’ll show how to create a Web Component and consume it in UI5! This is based on my UI5con session of 2023 together with peter.muessig .
- Vanilla Web Component (this one): https://blogs.sap.com/2023/07/07/ui5con-2023-vanilla-web-component/
- UI5 Web Component: https://blogs.sap.com/2023/07/07/ui5con-2023-ui5-web-component/
- Generate UI5 Library & Controls for UI5 Web Components: https://blogs.sap.com/2023/07/07/ui5con-2023-generate-ui5-library-controls-for-ui5-web-components/
- Consume UI5 Controls based on UI5 Web Components inside a UI5 app: https://blogs.sap.com/2023/07/07/ui5con-2023-consume-ui5-controls-based-on-ui5-web-components-inside...
Web Components is a different technology which is the foundation for many new UI5 controls, especially all the controls in the sap.ui.webc library. It is now also possible to create your own UI5 control starting from a Web Component. When using a Web Component for a UI5 control it will have a big impact on the performance of the rendering of UI5 controls including the full UI5 app. Therefore, it is important to understand how Web Components work and create Web Components in the best possible way. Controls are the foundation of the UI5 framework, the better the web components, the better UI5 apps will run.
The official definition of WebComponents: Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Read more here: Introduction - webcomponents.org
With UI5 Web Components it is important to understand how Web Components work in general. Once we understand how they work, we can look on how to integrate them. For this, I created a Vanilla Web Component which I’ll convert later into a UI5 Web Component. Afterwards, I’ll integrate this in a UI5 app.
I made a Web Component for the famous Star Wars intro with a title, logo and a list of episodes:
Web Component Usage
The html behind this star wars intro is nothing more than the following html:
Thanks to Web Components I can simple use the html tags “space-intro” and “space-article” but behind those tags is some logic hidden. The Web Component allows us to use our custom created html tags multiple times and always behave in the same way. The Web Component comes with his own html template, css stylesheet and a JavaScript/TypeScript class.
Full index.html page code: https://github.com/lemaiwo/space-webcomponent/blob/main/index.html
Register Web Component tags
The custom html tags are connected to the Web Component by registering the JavaScript/TypeScript class as a customElement with the name of the html tag. This is done by using the define function on the global variable “customElements” :
- space-intro with SpaceComponent
- space-article with SpaceArticleComponent
Web Component classes
The Web Component classes extend from the class HTMLElement which is the base class for a Web Component.
I have two Web Components:
- Space Component: This is the main Web Component with the intro, logo and background
- Space Item Component: This is used for showing one or multiple episodes inside the Space Component.
Both Web Components act as parent and child where Space is the parent of Space Item.
In the constructor we attach the shadow root to the Web Component. The shadow root is key for encapsulating the Web Component, read more about shadow dom here: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
Once the shadowroot is attached, we need to add the html template to the shadowroot. The html template can be defined in different ways, in the JavaScript/TypeScript class as a concatenated string or using the html tag template in the html. In this case, I used the html “template” tag in the index.html page just because it is easier to read and maintain:
Once the template is set, we can set the values of the Web Component attributes into the template.
In this specific case, the constructor also contains some logic for generating the stars in the background.
In the SpaceComponent one attribute is defined as “observedAttribute”: “intro”. This means that the Web Component will react on any changes of this attribute by calling the “attributeChangedCallback” function. This is also the place to update the intro value in the template:
The Web Component class for Space Article is a bit more simplified. It only has two attributes, title and body. The constructor is similar to the one of the Space Web Component, attach ShadowRoot, add html template and set the values in the template:
Again, make the attributes observable and set the values into the template:
With that, the two Web Components are created.
Full code of the Web Component is available here: https://github.com/lemaiwo/space-webcomponent/blob/main/src/main.ts
Web Component Templates
The template for the intro comes with its own css and html. Inside the html specific classes are used to set the attribute values that are provided by the Web Component class. In this example, we have a paragraph for intro which is being filled through the “intro” attribute and an article slot for the sub-WebComponent SpaceArticles. This last one is similar to aggregations in UI5 Controls.
The template for space-article also comes with its own css and html. This one contains a header and paragraph, the header is used to set the title attribute and paragaph for the body:
With this, we have two web components that work toghetter as parent and child just like an aggregation in UI5 controls.
The code of the template is available in the index.html page: https://github.com/lemaiwo/space-webcomponent/blob/main/index.html
Run the Web Component
The full example is available on GitHub: lemaiwo/space-webcomponent: Space webcomponent (github.com)
You can clone the project, run “npm install” and “npm start” to run the html page with Web Components.
Next step is to conert this to UI5 Web Comonents.
- SAP Managed Tags:
