Web components

New APIs allow us to build web experiences using a component model, but without the cost of a framework.

CodeEdit on GitHub

Table of contents

Shadow DOM

For the longest time, if you wanted to use the shadow DOM (and thus scoped CSS styles) you needed JavaScript:

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

But with declarative shadow DOM, you can do all of this without JS:

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Resources