キャスト紹介

potato4d

• @potato4d
• 花谷拓磨
• UIT 室エンジニア

Alan

• @AlanGDavalos
• Davalos Alan
• UIT 室エンジニア

Web Components 概要

• 現状はバージョン1 4つの仕様を含む
  • HTML Template
  • Custom Elements
  • Shadow DOM
    • Scoped CSSと違いDOMごと分離される
  • ES Modules
    • 元々 HTML imports だった

Web Components の 取り入れ方

• Web Components の採用案件
  • Ionic など
  • Bootstrap 6 では Web Components の採用が検討されている
• LitElement
  • Redux なども含まれている フレームワーク
    • 最近のフレームワークを使っていれば問題なく扱える
  • LitHTML との関係性
    • 内部的に LitHTML を使っている React と ReactDOM の関係性
    • 最近 LitElement 2.0 LitHTML 1.0 がリリースされた
      • LitElement というパッケージが既に存在していたためいきなり v2.0 に

未来の Components 開発について

• Web Components のメリット
  • ShadowDOMの性能が高い
    • CSS を書く時に 何にも影響されない / しない
  • Web標準なので廃れることはない
    • ある程度書き直しが必要になっても 根本的な修正は必要ない
• Web Components でまず開発し 各フレームワークに展開する
  • Components 開発の標準として

Web Components のこれから

• ShadowDOM
  • Custom Property でやっているようなところがより簡単になる
• データの繁栄など JavaScript フレームワークの必要性がなくなっていくことを期待

BGM & SE: 魔王魂