Lit & Stencil

「生のJS」でWeb Componentsを書くのは冗長すぎる。モダンなDXを提供するライブラリを使おう。

Lit (by Google)

一番人気。非常に軽量（5KB）。Reactのような宣言的なテンプレート（htmlタグ関数）が使える。

my-element.ts
import { LitElement, html, css } from 'lit';


export class MyElement extends LitElement {
  static styles = css`p { color: blue; }`;


  render() {
    return html`<p>Hello from Shadow DOM!</p>`;
  }
}
customElements.define('my-element', MyElement);

Others

  • Stencil (by Ionic): コンパイラベース。TypeScriptファースト。Ionic Frameworkのベースになっている。大規模向け。
  • Fast (by Microsoft): MicrosoftのデザインシステムFluent UIに使われている。