Modularize websites with Web Components

Web Perfect

Delete Function

Listing 5 declares <anot-item>. After line 15 has cloned the corresponding template and completed it in its own shadow DOM, the next line copies the comment text from the text call parameter to the <li> element (line 10). This is again done by assigning the innerHTML property.

Listing 5

anot-list.js (continued)

01   const anotItem = document.createElement('template');
02   anotItem.innerHTML = `
03     <style>
04       li {
05         padding:0.3rem;
06         margin:0.2rem;
07         background-color: var(--anot-item-bg, #f3f315);
08       }
09     </style>
10     <li id="text"></li>`;
11
12   class AnotItem extends AnotElement {
13     constructor(text) {
14       super();
15       this.shadowRoot.appendChild(anotItem.content.cloneNode(true));
16       this.shadowRoot.querySelector('#text').innerHTML = text;
17       this.shadowRoot.querySelector('li').addEventListener('click', e => this.rmItem(text));
18     }
19
20     rmItem(text) {
21       this.remove();
22       this.delItem(text);
23     }
24   }
25
26   customElements.define('anot-title', AnotTitle);
27   customElements.define('anot-item', AnotItem);
28   customElements.define('anot-list', AnotList);
29 })();

Thanks to line 17, a click on the <li> tag calls the delete routine rmItem(). The routine removes the list item from the display with remove(); then, delItem() deletes the comment from localStorage.

Worth Considering

Because the JavaScript code shown follows the ECMAScript 6 standard, the reference variable this in the lambda functions of lines 18 (Listing 3) and 17 (Listing 5) refers to the current object and not, as in the previous JavaScript specifications, to the event-triggering element (i.e., the button or the list entry).

Developers should never forget the call to super() in constructor() functions of derived classes (e.g., line 14 of Listing 5). At the end of the listing, the calls in lines 26-28 register the presented classes under the corresponding tag as custom elements.

Into the Microservice

To immerse yourself completely in the waters of microservices, you will want to store the comments by way of a back end in a central database on the server. In the best case, you would use XHTTP requests.

To identify the commentator, program a second microservice that exchanges data with the first over a suitable protocol. Simply encapsulate the login dialog on the website in another <user-auth> Web Component, which deposits the user ID in the browser's sessionStorage userid key after a successful login.

« Previous 1 2 3 4 5 Next »