WebComponentsメモ

1785 ワード
WebComponents WebComponents テキストリンク

WebComponents

カプセル化したコンポーネントスタイルをWeb標準（どのブラウザでも）で利用可能とするもの。

そもそも

react + styeled-component(CSS in JS)のような構成を一般化したもの（と理解）。
標準、ということで、JSさえ用意できれば、CDNなどを通して広く使えるコンポーネントが提供できる、ということか。

styled-component（CSS in JS)

半々くらいで賛否が別れているような状況

カスタム要素

カスタムタグをJSで追加すれば、その後のHTML内で利用できる。

customElements.define('word-count', WordCount, { extends: 'p' });

<word-count></word-count>

シャドウDOM

DOMツリーのカプセル化。シャドウDOMと呼ばれる仮想ツリーを構築し、名前空間を構築する。
最大のメリットはなんといってもCSSのカプセル化。

template

  • タグの組み合わせの集合体
  • 描画されない
  • カスタム要素に読み込める

slot

  • カプセル化に対するパラメータ