Lead Image © Andrey Prokhorov, fotolia.com

Modularize websites with Web Components

Web Perfect

Article from ADMIN 50/2019

By Andreas Möller

Web Components let you define your own HTML tags to restructure monolithic web pages into smaller services and simplify maintenance and servicing.

Microservices are being used more and more as architecture patterns for client-server applications. Developers break down monolithic back ends into smaller services that can be developed independently of each other and, if necessary, re-implemented with little effort.

Web developers naturally ask themselves how they can best integrate the multitude of small services into their websites. One answer is with Web Components [1], self-adjustable and reusable HTML tags that are standardized, work across browsers, and can be used with all JavaScript libraries and frameworks that also work with HTML (see Table 1).

Table 1

Native Use of Web Components

Browser	Version	Example Works?
Chrome	69	Yes
Firefox	63	Yes
Safari	12	Yes (untested)
MS Edge	42	No

For example, developers can use Web Components to integrate microservices into web pages without diluting HTML documents with redundant ID attribute values or additional stylesheet information.

Fully Integrated

Web developers integrate individual components with HTML tags they define themselves. In Lines 8-10 of Listing 1, this tag is <anot-list> ... </anot-list>. Lines 4 and 5 include the appropriate script components.

Listing 1

<anot-list> and <anot-title>

01 [...]
02 <head>
03   [...]
04   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
05   <script type="module" src="anot-list.js"></script>
06 </head>
07 <body>
08   <anot-list>
09     <anot-title>My Comments</anot-title>
10   </anot-list>
11   <article><Dummytext></article>
12   <todo-list> [...] </todo-list>
13 [...]

The JavaScript code (Listings 2-5) resolves the tags into a document fragment that includes stylesheet information. (For readability, the code is divided into several listings.) Lines 26-28 of Listing 5 define the self-designed HTML tags at the end. However, the adapted document fragment ends in a shadow Document Object Model (DOM) after it has been created, where <anot-list> assumes a role as a root element (Figure 1).

Figure 1: The shadow DOM is element-specific and can only be addressed by its shadow root. It remains invisible compared with the other document tree known as the light DOM.

Shadow DOM

The new DOM feature exists outside the actual document tree. The code creates a shadow root to mount document fragments under a specific host element, which creates a subtree for the element, known as a shadow DOM. The adapted new element can then be constructed in it.

Using the associated shadow DOM API, developers can address and configure embedded elements more elegantly than by using the unpopular and bulky <iframe> tag. The concrete result is an interactive comment function (Figure 2) that appears to the right of the dummy text. Figure 3 shows the associated source code for the new item in the browser's developer console.

Figure 2: The <anot-list> Web Component generates a comment function that saves locally (shown in the Firefox browser view on Ubuntu).

Figure 3: The Chromium developer console highlights the shadow root in the document tree.

Web Components can be used universally because of their weak interaction with other document components. Google offers such elements with the open source Polymer [2] framework; Mozilla's library of Web Components is known as X-Tag [3]. The Mozilla Developer Network offers more information [4] on this topic, as well. Additionally, the recently released Firefox 63 browser version supports a "modern Web Components API" [5].

In the Light of the DOM

Web Components themselves are not standardized but are described in the style of a design pattern [6]. They are generated in the interplay between custom elements [7], the shadow DOM [8], and the HTML templates [9].

The HTML templates are used to generate user-defined tags, as shown in Listing 5 (lines 26-28). Thanks to the shadow DOM, redundant ID attribute values and stylesheet details can be avoided. HTML templates also make it possible to write document fragments as HTML tags, as demonstrated in Listing 3 (lines 1-12).

1 2 3 4 5 Next »