Save 37% off PRO during our Black Friday Sale! »

Web Component, ganz ohne Framework! Live & in Action

Web Component, ganz ohne Framework! Live & in Action

Jeder kennt es: Kapselung und Wiederverwendung von UI-Komponenten im Web sind sehr mühsam. Meist ist es ein Zusammenkopieren von HTML, CSS und JavaScript, oftmals über eine oder mehrere Dateien verteilt. Vergisst man einen Teil, sieht es nicht wie gewünscht aus oder die Interaktion funktioniert nicht.
Doch damit ist jetzt Schluss! Mit Web Components eröffnen sich neue Wege im Web, um UI-Komponenten standardisiert und ganz ohne Framework implementieren und verwenden zu können. In dieser Session zeigt Patrick Jahr die wichtigsten Punkte für die erste eigene Web Component mit den Standards HTML Templates, Custom Elements und Shadow DOM.


Patrick Jahr

January 22, 2020


  1. JS January 22nd, 2020 Rhein-Neckar #12 Web Components, ganz ohne

    Framework! Live & in Action @jahr_patrick
  2. Who am I? Patrick Jahr @jahr_patrick Software Consultant und

    Developer @ Thinktecture AG
  3. • The challenge • Web Components • What are they?

    • How to use them? • How to create them? Agenda
  4. The challenge

  5. Components Components Components Components

  6. None
  7. <div></div>

  8. <div id="fancyWidget"> </div> <html> <head> <script src="fancyFramework.js"></script> </head> <body> </body>

    </html> • No semantics • Changes are difficult • Framework-dependent
  9. <div id="fancyWidget"> <html> <head> <script src="fancyFramework.js"></script> </head> <body> </body> </html>

    <span id="label"></span> <button id="incButton">+</button> <button id="decButton">-</button> </div> • Global scoping • Naming conflicts • Styling conflicts
  10. <my-counter value="1" minimum="1" maximum="5"></my-counter> <html> <head> <script type="module" src="my-element.js"></script> </head>

    <body> </body> </html> • Semantics • Local scoping • Bundle import
  11. Web Components

  12. • Web Components are a collection of 3 technologies •

    Custom Elements • HTML Templates • Shadow DOM • Bring a native component model to web instead of having to use frameworks Web Components - What are they?
  13. HTML Templates

  14. Can I use - HTML templates?

  15. • HTML tag: <template> • Parsed, but not rendered •

    Instantiated via JavaScript HTML Templates <template> <header>My Image Card</header> <img src="..." /> <p>Description</p> </template> const template = document.querySelector('template'); const img = templateInstance.content.querySelector(‚img'); img.setAttribute('src', ''); document.body.appendChild(templateInstance.content.cloneNode(true));
  16. Demo… let´s start

  17. Custom Elements

  18. Can I use - Custom Elements?

  19. • Create your own HTML tags • Lifecycle model (“connected”,

    “disconnected”, “attribute changed”, “adopted”) • Reusable • Decouple behavior from the document • ES6 Class • Inherit from HTMLElement or any other HTML element • Need to be defined in a CustomElementRegistry Custom Elements <my-rating value="3" stars="10"></my-rating>
  20. otherElement.appendChild(myRating); otherElement.removeChild(myRating); document.body.appendChild(myRating); const myRating = document.createElement('my-rating') class MyRating extends

    HTMLElement { constructor() { super(); console.log('component constructed'); } connectedCallback() { console.log('component added to DOM'); } adoptedCallback() { console.log('component was moved in DOM'); } disconnectedCallback() { console.log('component removed from DOM'); } attributeChangedCallback(name, oldVal, newVal) { console.log('a attribute has been changed'); } } window.customElements.define('my-rating', MyRating);
  21. • Static getter observedAttributes
 returns all attributes which
 should be

    observed • All those attributes will trigger
 upon a change • Does not execute on property
 change! Custom Elements - Observed Attributes class MyRating extends HTMLElement { constructor() { super(); } static get observedAttributes() { return [ 'value' ]; } attributeChangedCallback(name, oldVal, newVal) { if (name === 'value') { this.innerHTML = `Rating value ${newVal}`; } } } <my-rating value="5"></my-rating>
  22. CustomElementRegistry

  23. • Window global registry for all custom elements • API

    • define(): defines a new element • get(): returns the constructor of an element (or undefined) • whenDefined(): returns a promise which is fulfilled, when the custom element is available • upgrade(): upgrades an element before it is connected to its shadow root CustomElementRegistry window.customElements.define('my-rating', MyRating);
  24. Importing Web Components

  25. • ES6 Import • Via Code Importing Web Components <script

    type="module" src="my-rating.js"></script> // static import import './my-rating.js'; // dynamic import import('./my-rating.js') .then(...); // or lazy-loading via const script = document.createElement('script'); script.src = './my-rating.js'; document.body.appendChild(script); const myElement = document.createElement('my-rating'); document.body.appendChild(myElement);
  26. Demo… back to

  27. Shadow DOM

  28. Can I use - Shadow DOM?

  29. • Encapsulates HTML and CSS • Isolated DOM: elements within

    Shadow DOM are not selectable from outside • e.g. document.querySelector() won’t return a result • Scoped CSS: CSS styles stay within Shadow DOM, no losses, no influence • Composition: declarative, markup-based API, put elements from outside in • Simplifies CSS: no conflicts with existing classes and IDs • Productivity: app consists of chunks of components instead of one big page Shadow DOM
  30. • Shadow host
 DOM node that the 
 shadow DOM

    is attached to • Shadow tree
 DOM tree inside shadow DOM • Shadow boundary
 Place where the shadow DOM
 ends and the regular DOM begins (“Light DOM”) • Shadow root
 Root node of the shadow tree
 Shadow DOM document shadow host Document Tree Shadow Tree shadow root Shadow boundary
  31. • attachShadow() attaches a shadow DOM to any HTML element

    • open and closed mode Shadow DOM <html> <head></head> <body> <div></div> <script> const shadowHost = document.querySelector('div'); const shadowRoot = shadowHost.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = '<h1>Hello World!</h1>'; </script> </body> </html>
  32. • open allows access to the HTML element’s shadow DOM

    • closed does not allow access to the HTML element’s shadow DOM Shadow DOM // ... shadowHost.attachShadow({ mode: 'open' }); document.querySelector('div').shadowRoot.querySelector('h1'); // -> [HTMLHeadingElement] // ... shadowHost.attachShadow({ mode: 'closed '}); document.querySelector('div').shadowRoot.querySelector('h1'); // -> Can not read 'querySelector' of null
  33. • A (named) placeholder 
 to fill with your own

 markup • Basically mixes together 
 two DOM trees: 
 the shadow & light tree Shadow DOM - Slots <template> <style> :host { border: 1px solid black; display: block; } </style> <div> <slot></slot> <slot name="another-slot">With Default Content</slot> </div> </template> <!—Default content—> <my-element></my-element> <!-- No slot filled —> <!—Unnamed slot content; Default content for named slot—> <my-element> <div>Unnamed Slot Content</div> </my-element> <!—Unnamed slot content; Another slot content—> <my-element> <div>Unnamed Slot Content 2</div> <div slot="another-slot">Another Slot Content</div> </my-element>
  34. • Slots emit an event, whenever its content changes: slotchange

    • Get the slotted elements via assignedNodes() Shadow DOM - Slots const slot = this.shadowRoot.querySelector('slot'); slot.addEventListener('slotchange', () => { const assignedNodes = slot.assignedNodes(); // Do something with assignedNodes });
  35. • Styling is done via <style>-tags • All stylings are

    local and do not overwrite styles from other shadow DOMs • No other stylings will bleed into the shadow DOM Shadow DOM - Styling <template> <style> h1 { color: red; } </style> <h1>Hello World!</h1> </template> const shadowRoot = document.querySelector('div') .attachShadow({ mode: 'open' }); shadowRoot.innerHTML = '<h1>Hello World!</h1>' + '<style>h1 { color: red; }</style>';
  36. • Inside shadow DOM • :host, :host(), :host-context(), ::slotted() •

    Outside shadow DOM • CSS Shadow Parts: ::part() • In Discussion: ::theme() • Deprecated: >>> (“shadow piercing”) Shadow DOM - CSS Selectors
  37. Shadow DOM - CSS Selectors - Inside Shadow DOM <template>

    <style> :host { display: block; background-color: blue; } :host(.red) { background-color: red; } :host-context(main) { background-color: yellow; } ::slotted(article) { background-color: black; } </style> <div> <p>Before slot</p> <slot>Default Slot content</slot> <p>After slot</p> </div> </template> <my-rating></my-rating> <my-rating class="red"></my-rating> <main> <my-rating></my-rating> </main> <my-rating> <article> Article Content </article> </my-rating>
  38. • CSS Shadow Parts (Working Draft): ::part() • Allows to

    selectively expose elements from the shadow tree to the outside page for styling purposes • • CSS Shadow Parts (Unofficial Draft): ::theme() • Matches any parts with that name, anywhere in the document • Shadow DOM - CSS Selectors - Outside Shadow DOM
  39. • Allows to selectively expose
 elements from the shadow tree

 the outside page for styling 
 purposes Shadow DOM - CSS Selectors - Outside Shadow DOM - ::part <template> <style> header { background-color: crimson; } </style> <div> <header part="my-header">Style me</header> </div> </template> <style> my-rating.styled::part(my-header) { background-color: black; color: white; } </style> <my-rating></my-rating> <my-rating class="styled"></my-rating>
  40. • If a nested Web Component 
 will expose an

    inner Web 
 Component’s part, it has to 
 use exportparts=“part1 part2 …”
 instead of part=“name” Shadow DOM - CSS Selectors - Outside Shadow DOM - ::part <style> my-rating::part(textspan) { color: red; } </style> <template id="my-element-outer-template"> <my-element-inner exportparts="innerspan textspan”> </my-element-inner> </template> <template id="my-element-inner-template"> <span part="innerspan">Innerspan</span> <span part="textspan">Textspan</span> </template> <my-element></my-element>
  41. Demo… back to

  42. Conclusion

  43. Web Components help in giving a semantic structure in apps

    Leverage the shadow DOM to encapsulate your Web Components They encapsulate HTML and CSS Improve maintainability and reusability Smaller bundles with frameworks (Angular Ivy, Stencil, Lit-Element) Form Participation API Web Components - Summary
  44. And… now? • Try it out! Fiddle around with Web

    Components • Use them! Include first small Web Components into your application • Be prepared! Keep up to date with the development of Web Components • Slides: • Repository: • Contact:
  45. Take care! A sneak peek into the future

  46. Versioning My library A My library B 3rd party library

    1.0 3rd party library 2.0 Application <my-web-component /> <my-web-component /> defines defines Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “my-web-component” has already been used with this registry.
  47. • Problem: Custom Element Registry is a window global object

    • Possible solution currently discussed by W3C • Scoped Custom Element Registry • • Current usable solutions • Version your HTML tags • The host application is the only one loading WCs, even 3rd-party, but this could break other Web Components expecting a certain version Versioning
  48. • If you wish to sync them, then you’ll need

    to sync them! • “Reflecting properties to attributes” or “Reflected DOM Attributes” • Helps to keep DOM representation in sync with its JavaScript state • Watch out! Properties can hold objects, numbers etc. Attributes only strings • Attributes vs Properties input = document.createElement('input'); console.log(input.getAttribute('value')); // null input.value = 'one'; console.log(input.getAttribute('value')); // null input.setAttribute('value', 'two'); console.log(input.value); // one
  49. • Shadow DOM encapsulates the DOM only • Use common

    techniques for scoping JavaScript • May use the global scope to your advantage for app-wide configurations • But global polyfills can cause problems (e.g. if you load zone.js twice) JavaScript is still global scoped
  50. • Easy things may require more code • Attributes vs

    Properties • addEventListener etc. • Error handling • Bigger component libraries need a strong foundation • Think of when and how to render your component • There is no virtual DOM like in React or Angular • You may need to think of partial DOM updates for bigger components Boilerplate & render loops
  51. • There is no built-in template engine, you may be

    used to from SPA frameworks like Angular, React, Vue etc. • JavaScript template strings are preferred for better readability • Can get complex and unreadable when conditions are used heavily No built-in template engine
  52. No built-in template engine - Lit Element example get previewTemplate()

    { return html` <div @click="${this.clickHandler}" class="preview"> ${this.preview.image ? html`<img src="${this.preview.image}" alt="Preview" />` : html`` } <div> <header>${this.preview.title}</header> ${this.preview.description ? html`<p>${this.preview.description}</p>` : html`` } </div> </div> `; }
  53. • Currently there is no auto completion support for Web

    Components • Stencil tries to solve this by generating TypeScript Definition files • VS Code & W3C are discussing possible solutions • • Stencil is currently generating a possible solution with its compiler Editor support // type definitions
  54. • There is no standard build process • You can

    use any tool you want, e.g. webpack, parcel, etc. • Be aware: • CSS post processing • Asset management Build process // custom asset management
  55. • Forms and Web Components don’t play well yet •

    FormData is not populated • <button type=“submit”> does not work • Form Participation API aka “Form Attached Controls” is discussion • • • • Form Participation API