◆ lit-html 2.0 だと ref directive が使える
  ◆ 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 はこれです

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>