Shadow Dom

TLDR: if you need slots, for now use HyperHTML. Otherwise use Preact!

Both of our current component rendering engines (HyperHTML and Preact) have built-in methods for automatically rendering parts of your component’s UI to the Shadow DOM if supported, and render a similar fallback if unsupported (IE 11).

However, because JSX can support dynamic tag names (HyperHTML or similar libraries like lit-html can’t currently), the goal is to move everything over to Preact / JSX (and ultimately move us away from HyperHTML as soon as we can get support working in Preact).

HyperHTML

return this.html`
  ${this.addStyles([styles])} // array of stylesheets
  <button class="${classes}">
    ${this.slot('default')} // Render <slot name=”default”>, or the default child elements of the component, depending on what the browser supports
  </button>
`;

Preact

return (
  <div className={classes}>
    {this.addStyles([styles])}
    <button className={classes}>
      { text }
    </button>
  </div>
);