web components - basics

web components

Workshop, 27.05.21
Bruchner, Philipp

1. About
2. specification of web components
3. simple web component via vanilla JS & web component API
   1. step-by-step implementation of a toggle button
   2. disadvantages
4. StencilJS
   1. alternatives
   1. motivation
   2. implementation of a toggle button
   3. resolving disadvantages
5. outlook

What are web components?

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.

Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.

src: [1]

Overview of specifications

  1. custom elements
  2. shadow DOM
  3. HTML template
  4. ES modules

custom elements

  1. ​support to build fully-featured DOM elements
  2. concept is already known because of web libraries / frameworks
  3. has to have a dash in the element selector, i.e. <wc-button>
  4. elements have to be registered
  5. autonomous custom element vs customized built-in
  6. behaviour via lifecycle methods, attributes, properties & events

demo

class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } static get observedAttributes() { return ["country"]; } attributeChangedCallback(name, oldValue, newValue) { this._countryCode = newValue; this.render(); } connectedCallback() { this.render(); } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v); } render() { this.innerHTML = this._countryCode; } } customElements.define("flag-icon", FlagIcon);

shadow DOM

  1. ​nothing new: compare to video-HTML-Tag which only exposes control
  2. is a node tree whose root is a shadow root
  3. allows encapsulation
  4. has different modes: open / closed
  5. contains zero or more elements that are slots elements & text nodes
  6. can be slotted

demo

// Create a shadow root var shadow = this.attachShadow({mode: 'open'}); // Create text node and add word count to it var text = document.createElement('span'); text.textContent = count; // Append it to the shadow root shadow.appendChild(text);

HTML templates

  1. ​markup structures can be reused repeatedly
  2. template and content not rendered until attached to DOM
  3. elements can offer 'wildcard content' named slot

demo

document.querySelector('section.present').appendChild( document.querySelector('#template').content.cloneNode(true) );

ES modules

  1. ES = ECMAScript ~ JS
  2. ​standardized inclusion & reuse of JS documents

demo

// index.html // main.js import {HelloParagraph} from './hello-paragraph.js'; customElements.define('hello-paragraph', HelloParagraph); // hello-paragraph.js export class HelloParagraph extends HTMLElement { // ... }