Web components

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

Here's a way to define a custom element in HTML. If all you're doing is using styles and slots, this can be an easier way to create those components. The JavaScript required fits in a tweet. Read on for more 👉 pic.twitter.com/ZDJuGB3tUh

— Matthew Phillips (@matthewcp) January 16, 2019