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