Lit公式サイト読書会おぼえがき

最近仕事で Web Components のライブラリである Lit を使っていて、ちょうどいいタイミングで公式サイト読書会が開かれたので参加しました。

メモ

• 丁寧に読み直すと良さそうなページ
• 　https://lit.dev/docs/components/rendering/
• 　https://lit.dev/docs/components/properties/

事前に用意していた質問

• Shadow DOMを使った時のレイアウトシフト(っぽいやつ)で困っているがいい解決策はないか
  • たとえば高さ100pxのmy-elementっていうコンポーネントがある時、現状同じheightのdiv要素を置いておいてそこにposition: absolute;で被せて対処している....
• Polymer Projectの初めの頃からいろんなバージョンを使ってきたお兄さん「こういうのはいかがですか」

my-element:not(:defined) {
  height: 100px;
}

• reset.cssどうやってますか
  • 自分は現状こうやってます感じでやってます

const resetCss = css`...`

...
static get styles() {
  return [
    resetCss,
    css`
      .yo {
        ...
      }
    `,
  ]
}

• お兄さん「いいと思います。コンポーネント毎に複数ファイルあって全部で読み込んだとしてもTree Shakingが効くだろうし」 　

  Lit

• LitはWeb Componentsを書くときの手数を減らすことを目指している

• 仮想DOMでない

  • DOMを渡り歩いて直接変更点のみを更新する

• おもしろWeb Componentsライブラリ

  • wired-elements
    • 
    • 手書きっぽい見た目

• Lion

  • CSSだけ後から当てる系のUIライブラリ

• Litのなかみ

  • 
    • 2回継承してる
    • 「たとえば継承を途中で止めてレンダリングを担当してる「LitElement」の部分を別のライブラリに挿げ替える、といったことも可能で、Litの作者がVueに置き換えるってのをやってたよ」

• render()の4つの注意

  • Primitive values like string, number, or boolean.
  • TemplateResult objects created by the html function.
  • DOM Nodes.
  • Arrays or iterables of any of the supported types.

• つまりReact書いてる時と同じ気持ちでOK

• @propertyと@stateで明確に分けましょう

  • @propertyを内部から書き換えない方が良い
  • booleanを扱う際は特に気をつけるべき点(だそう)
  • https://lit.dev/docs/components/properties/#internal-reactive-state

• type: Boolean の時が少し直観と違うかも

  • @property({ type: Boolean }) な greetって名前のattributeがあるとすると
  • <my-element greet="yo"> は true
  • <my-element greet> は true
  • <my-element> は false
  • greet="false" でfalseだと思ってた......

• Web Components系ライブラリのパフォーマンス比較

  • https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

5時間では公式サイトの半分ぐらいしか読めなかったので第二回が開催される予定です。心待ちにしています。