Lit + Deno + Packup でお手軽に Web Components 定義で記した通りLitのコンポーネントが開発できるようになったので、前回の更新ではブログ部分のVue.js 2コンポーネントを Lit コンポーネントに置き換えて Vus.js 依存を解消しました。Lit の使いかたがすこしわかってきたので、把握した注意点をメモとして残しておきます。
以下すべて Lit v2.3.1 時点の話となります。また理解不足により誤りを記しているかもしれません。ご容赦を。
CSS フレームワークとの併用ではシャドウ DOM は使わない
Lit のコンポーネントはシャドウ DOMへのアタッチを標準的な利用と想定して定義されています。CSS in JS でコンポーネントのスタイリングを完結させるケースにおいては望ましい想定ですが、既存の CSS フレームワークの利用などスタイルを HTML 全体で定義・利用するケースではシャドウ DOM へのアタッチはスタイルが反映しないため使えません。
HTML 全体で定義・利用するスタイルを共有するにはシャドウ DOM ではなくカスタム要素の存在する DOM にアタッチさせます。createRenderRootメソッドを定義、this を返すようにするとカスタム要素にアタッチされ(=レンダリング結果はカスタム要素の子孫要素になる)、スタイルも反映するようになります。
なお createRenderRoot の返す値は HtmlElement インターフェース を実装していればなんでもよいので、 this である必要はありません……が、単純にわかりづらくなるのであまり変なことはしないが吉です。
参考: LitElement で Light DOM の Web Component を作る方法 - Qiita
slot 要素による子孫要素レンダリング位置指定はシャドウ DOM アタッチ時のみ有効
公式ドキュメントのRendering children with slotsは slot 要素を使うことでカスタム要素の子孫要素を指定位置にレンダリングできると記していますが、これはシャドウ DOM にアタッチしたときの話で、 createRenderRoot でカスタム要素と同じ DOM にアタッチしたときは slot 要素は機能しません。
styles スタティックプロパティによるスタイル指定もシャドウ DOM アタッチ時のみ有効
LitElement クラスの styles スタティックプロパティによるスタイル指定もシャドウ DOM にアタッチしたときのみ有効です。
カスタム要素を Vue.js 2.x は残さない、Lit は残す
Vue.js 2.x はマークアップで記載したカスタム要素をコンポーネントのレンダリング結果で完全に置き換えますが、Lit はマークアップで記載したカスタム要素には手を触れません(つまり DOM 上に残ります)。そのためクラスなどの指定の位置関係にシビアな CSS フレームワーク(Material Design Liteがまさにそれでした)と Lit のコンポーネントを併用するときはレンダリング結果が CSS フレームワークの要求通りかに注意を払う必要があります。
以上、参考になりましたら幸いです。
2022-09-28(Wed)追記: 書き洩らしていた「styles スタティックプロパティによるスタイル指定もシャドウ DOM アタッチ時のみ有効」を追加しました。
2023-07-18(Tue)追記: 関連エントリシャドウ DOM を使わない LitElement で slot 要素を使う方法を公開しました。