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:

  <template shadowroot="open">
  <h2>Light content</h2>