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.
Buy this article as PDF
(incl. VAT)