HACP & HATS User Group - Group home

Using Web Components in HATS Web Application

By BADAL BURATHOKI posted Sun July 17, 2022 03:36 AM



Web components are standards that allow encapsulation and interoperability of HTML elements. Custom components created using Web components can work across most modern browsers and any JavaScript framework. Each component can have its unique functionality and styling.

E.g. <my-loader class=”hatsLoader” visible=”true”></my-loader>

Why use Web Components

You can build individual Web Components and re-use those in any Web project irrespective of what technologies these use. This project's major advantage is using the same kind of technology as Angular, jQuery, React, etc., if you want to include or shift to other technologies in the future, then Web Components are the ones to look at.

  1. Future proof Web Standards
    A web component uses browser-native technologies and follows existing Web standards. For e.g., Custom elements are created by extending HTMLElement class or other HTML built-in element classes like HTMLButtonElement.

  2. Build Tech Agnostics UI
    A Web Component-built library can execute in Angular, React, Native JS, or any other UI framework. E.g., you may have a Web application built using Angular, but due to some requirements, you need to move to another framework like React. A Web component-built library can switch between any such framework, and no re-designing is required.

  3. Encapsulation
    The markup structure, style, and behaviour are kept hidden and separate from other codes on the page. The HTML and CSS code are not exposed to the main DOM. Code remains clean with no CSS leaks and naming convention conflicts.

Creating Web Components

Primary technologies used to create these components are:

  1. Custom Elements.
  2. Shadow dom.
  3. HTML Templates.

For more information, please follow the below link:

Below are some common steps to create a Web Component using plain JavaScript:

  1. Create a class e.g., MyRatings and extent HTMLelement class.
    class MyRatings extends HTMLElement{ … }
    You can define event listeners on this element and attributes, its getter and setter methods, etc.

    Once the class is created, define the custom element:
    customElements.define(“my-ratings”, MyRatings);

  2. Using ShadowDOM, create a scoped DOM tree that will be attached to the Custom element. Styles defined in this scoped DOM do not leak out. E.g., ‘document.querySelector()’ won't return nodes in the component's shadow DOM.

    Use Custom Element’s constructor to attach a Shadow Dom:
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<style> …. </style>`;

  3. The template serves as storage for HTML markup templates. The content of the template is parsed by the browser but is hidden by the rest of the Webpage.
    Place the Custom element content in the template and append a clone of the template content to the shadow root using Node.cloneNode().

  4. Import the Web component as a Javascript module and use it as a standard HTML element, <my-ratings></my-ratings>.

Using Libraries to build Web Components

If you are writing a few Web Components, you can use the raw methods discussed above to build those. However, if you are writing many Web components, it can be hard to build these from scratch.

There are libraries available that help to save time and remove development complexities. These libraries reduce the boilerplate code and generate web components that are interoperable and future-ready. Few such libraries are Stencil, lit-element, etc.

Introduce Web Component in a HATS Web application

HATS Web applications allow seamless integration with other components. You can add bootstrap capabilities, a framework like jQuery, connect with external databases and other libraries, etc.

You can build Web Components and use those between multiple HATS applications. You can save your development time by re-using these components. You can package these Web Components and make these available in the CDN network and use them between multiple HATS applications.

Integration of Web Component can be achieved by building the library using common JavaScript tools like Webpack, Rollup, etc. Bundle your Web component in a JavaScript library and include it in the HATS project.

These tools bundle the library for modern and legacy browsers, minify JS, optimize your code, and prepare dependencies for serving it in a production-ready environment.

Once the library is bundled as a minified JS, import it into your HATS project and include the web component.

Here is a sample component that is built using lit-element and has been bundled using Rollup:

Rename the output file to a meaningful name e.g., loginHATS.js and import it into the HATS application:

Deploy the HATS project to view the Web component in action:

Contact Us
For further information on Automation, Services offerings, or technical details in IBM HACP/HATS please connect with HCL mainframe Lab services.

Mainframe Lab Services