Web components
New APIs allow us to build web experiences using a component model, but without the cost of a framework.
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
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