Web components

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

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