Web Component Standards:
Custom Elements, Shadow DOM & Co

When to use Web Components

Implementing Web Components

Web Component Standards

Custom Elements

Shadow DOM

HTML Templates

HTML Imports

CSS Variables

Custom Elements

<script src="dk-tabs.js"></script>
<dk-tabs>
  <dk-tab title="Tab 1">This is tab one</dk-tab>
  <dk-tab title="Tab 2"><h2>Antoher tab</h2></dk-tab>
</dk-tabs>

Custom Elements

Shadow DOM

Shadow DOM

HTML Templates

Parse HTML only once

<template id="item-template">
  <div>Whatever content you like</div>
</template>

const templ = document.getElementById('item-template')
for (let i = 0; i < 100; i++) {
  const node = document.importNode(templ.content, true)
  elm.appendChild(node);
}

HTML Templates

CSS Variables

Declare a variable

element { /* or use pseudo selector :root */
  --background-color: #3f0;
}

Use variable

element {
  background: var(--background-color, #9E9E9E);
}

CSS Variables

Polyfills / Shims

@webcomponents/webcomponentsjs

document-register-element

When to use Web Components

Reusable Web Thingies

Former jQuery Plugins

Examples: gallery, date-picker

UI Frameworks

Ionic Framework 4

Your in-house component framework

App Navigation

Your whole app

Implementing
Web Components

Options

1. Native API (Custom Elements / Shadow DOM)
2. Lib / Compiler
   Stencil.js, SkateJS, Polymer, LitElement
3. Framework
   Angular, Vue, Svelte, ...

Native API

Demo

Stencil

@Component({
  tag: 'my-hello',
  styleUrl: 'my-hello.css',
  shadow: true
})
export class HelloComponent {
  @Prop() name = 'world';

  render() {
    return (
      
Hello, {this.name}
    );
  }
}

LitElement

@customElement('my-hello')
class HelloComponent extends LitElement {
  @property() name = 'world';

  render() {
    return html`
      
      
Hello, ${this.name}
    `;
  }
}

Lib / Compilers

Frameworks

Build component in your framework of choice

• Angular Elements
• React Web Component
• Vue Custom Element

Tab Component

Demo

Using Web Components

Example: Angular

1. Add custom elements schema:

   @NgModule({
     // ...
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   })

2. Import the component in your module:

   import '@myscope/mycomponent'

3. Use it in your HTML:

   <my-component [attr]="val"></my-component>

Does Framework X Support this?

Gotcha: Polyfills / ES5 (IE11)

Stencil works OOTB (even in IE11)!

Fiddle with all others 😭

Summary

Use web components for shared stuff

Write small components in Stencil, LitElement & Co

More complex:
use the framework of choice

IE11 is hard

Thanks! Questions? 🍻

References, Further Readings

• Building Components | Google Developers
• Web Components Todo
• Custom Elements Everywhere
• Stencil Homepage
• Angular Elements
• 2018 - The Year of Web Components - Dominik Kundel
• Stencil.js vs lit-element vs Vanilla vs Shadow DOM vs Vue.js What is the best solution for Web component