lit-html 1 でも ref directive を使う
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ lit-html 2.0 だと ref directive が使える
◆ lit-html で作られた要素への参照を取得できる
◆ 1 系には追加されてないので自作
◆ lit-html で作られた要素への参照を取得できる
◆ 1 系には追加されてないので自作
最近では lit-html と lit-element がまとまった lit パッケージが出て lit-html は 2.0 になりました
アップグレードガイドを見ると lit-html はあまり変わってないようです
基本的な使い方ならそのまま動きそうです
大きな違いは directive で 関数ベースなものからクラスベースなものに変わったようで directive を自作してる場合には影響が大きそうです
新しく何かを作るときに使うのは lit-html 2.0 にしてますが 1 系として作ってるのはわざわざ 2.0 にはせず 1 系のままです
2.0 系を使っていて気づいたのですが directive に ref が追加されています
React の ref に似たもので lit-html で管理している DOM の要素への参照を取得するのに使えます
querySelector で取得すればよかったので これまでは無いならないでも良いと思ってました
ですが 2.0 で使ってみると便利ですし きれいに書けるので欲しくなりました
テンプレートを複数に分ける場合 querySelector でやろうとするとルートからのツリー構造を考えないとだめで一手間かかりますし 構造が変更になると修正も必要になるんですよね
1 系にも追加されたらいいのですが 現状の最新の 1.4.1 でも追加されていません
https://github.com/lit/lit/tree/lit-html-1.x/src/directives
1 系でも使えるように directive を自分で作りました
ref directive はこれです
使うときはこんな感じです
2.0 では ${} だけを属性に配置できるのですが 1 系では name=${} 形式じゃないとエラーになるので _ という名前を使ってます
名前は無視するので ref=${} など他のにしてもよいです
やってることは directive 定義の通り 要素を value プロパティに代入するだけです
2.0 の ref directive だとコールバックも渡せるようですが 特にこの使い方は使う予定がないので入れてません
アップグレードガイドを見ると lit-html はあまり変わってないようです
基本的な使い方ならそのまま動きそうです
大きな違いは directive で 関数ベースなものからクラスベースなものに変わったようで directive を自作してる場合には影響が大きそうです
新しく何かを作るときに使うのは lit-html 2.0 にしてますが 1 系として作ってるのはわざわざ 2.0 にはせず 1 系のままです
2.0 系を使っていて気づいたのですが directive に ref が追加されています
React の ref に似たもので lit-html で管理している DOM の要素への参照を取得するのに使えます
querySelector で取得すればよかったので これまでは無いならないでも良いと思ってました
ですが 2.0 で使ってみると便利ですし きれいに書けるので欲しくなりました
テンプレートを複数に分ける場合 querySelector でやろうとするとルートからのツリー構造を考えないとだめで一手間かかりますし 構造が変更になると修正も必要になるんですよね
1 系にも追加されたらいいのですが 現状の最新の 1.4.1 でも追加されていません
https://github.com/lit/lit/tree/lit-html-1.x/src/directives
1 系でも使えるように directive を自分で作りました
ref directive はこれです
const ref = directive((ref_obj) => (part) => { ref_obj.value = part.committer.element })
使うときはこんな感じです
<input _=${ref(input_ref)}>
2.0 では ${} だけを属性に配置できるのですが 1 系では name=${} 形式じゃないとエラーになるので _ という名前を使ってます
名前は無視するので ref=${} など他のにしてもよいです
やってることは directive 定義の通り 要素を value プロパティに代入するだけです
2.0 の ref directive だとコールバックも渡せるようですが 特にこの使い方は使う予定がないので入れてません
例
FOCUS と書かれたボタンを押すと input にフォーカスが当たります<!doctype html>
<script type="module">
import { html, render, directive } from "https://unpkg.com/lit-html@1.4.1/lit-html.js"
const ref = directive((ref_obj) => (part) => { ref_obj.value = part.committer.element })
const input_ref = {}
const focusInput = () => {
input_ref.value.focus()
}
render(
html`
<style>
input:focus { outline: 3px solid lightskyblue }
</style>
<button @click=${focusInput}>FOCUS</button>
<input _=${ref(input_ref)}>
`,
document.getElementById("root")
)
</script>
<div id="root"></div>