気まぐれメモランダム / でたらめフィードバック

タグ: Lit

シャドウDOMを使わないLitElementでslot要素を使う方法

公開:
Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。しかし考えてみれば普通に DOM にレンダリングしたのですから普通に DOM として操作すればよいだけの話です。幸いなことにその実現を容易にするライフサイクルメソッドをLitElementクラスは定義可能です。レンダリング前に呼び出されるconnectedCallbackメソッドで子要素を参照できます…
エントリを表示

LitでVue.js 2.xコンポーネントを置き換えた話

公開: / 最終更新日:
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 へのアタッチはスタイルが反映しないため使えません。…
エントリを表示

Lit + Deno + Packupでお手軽にWeb Components定義

公開: / 最終更新日:
IE サポート終了でWeb Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。

Deno をインストール

まず Deno をインストールしていなければインストールします。Windows ならWindows パッケージ マネージャー(winget)でインストールできればお手軽なのですが、残念ながらまだ存在しません(Release Builds on WinGet Pkgs · Issue #5640 · denoland/deno…
エントリを表示

Pick up work

最近のエントリ

アーカイブ

ブログ情報