web components のすすめ

勉強会に行った時のメモです

---

web components の近況

• IEは基本ダメ2020.01でもうWin7のサポートが切れるので考えなくてよいでしょう
• EdgeもDevelopingになりました
• どうしてもIEで使いたい場合はポリフィル入れればよいよ（ケアは必要
• モダンなものだとpolyfillsなしでOK

基本

• 新たにESModulesが追加された
• HTML Templates,HTML Importsは使わない
• 逐一callBackが呼ばれているだけなのだけどね
• attachShadow mode:open
  • styleの要素なんかが外に出ない隠蔽しちゃう
  • shadowDOMを持つ要素は子要素を持たなくなる
  • 入れると消えた子要素がslotの要素として割り当てられる
    • 要素名で部分を指定が可能

使い所

• プロジェクトを超える共通コンポーネント
• コンポーネントライブラリを使う
  • iron-autogrow-textarea とか pinch-zoom とか
  • webcompoonents.org, googlechromelabs
• マイクロフロントエンド
  • マイクロサービスをフロントエンドに持ち込む
    • e.g. Reactを隠蔽する（webComponentsだけど中身はReactで動いてるとか）
    • ページの関心毎と技術的関心毎を分離できる
• SSL
  • Shadow DOMとslotを利用した Hydrate不要のSSRがつくれる
  • 標準仕様なので使えるところで使いましょう

現実的な開発

• バニラでかく（疲弊しちゃう〜）
• lit-htmlを使う
  • lit-htmlアプリをwebComponentsにする
• lit-elementを使う

• Angular/Vueを使う

  • FWの機能によってFWからwebComponentsを作る

• バニラで書く→疲弊する→なぜ？

  • ゼロ依存なので軽くて見通しがいい
  • DOM APIを使うことになるので複雑なテンプレートには不向き
  • 属性値は文字列になるのでプリミティブなタグを作る目的の方が相性が良い

• lit-html

  • polymer
  • テンプレートだけをlit-htmlで書く
    • 更新があるときは勝手に差分更新してくれるので便利
    • webComponentsとして定義する以上はある程度のプリミティブさは求められるよ
• lit-element
  • litElementをextendsすることで色々良いね
  • typescriptnative!!!
  • lit-htmlのベネフィットを持ち込める
  • property({type:x})で柔軟な属性値を扱える（関数とかも
  • RxJSとの相性が良い
  • ライブラリ
    • fit-htmlとかもある
  • 全てが関数，全てが型付き！！！
  • HTMLと親和性が高い

余談

• htm
  • tagのテンプレートで書くライブラリ
  • htm自体はテンプレートを解釈しない
  • JSXに似たシンタックス
    • ただし，型検索できない…
  • preach, vhtml と組み合わせて使う

＊文法は似ているがフォーカスが異なるのでプロジェクトに合わせて考える FPが好きならlit-htmlもおすすめ