◆ 属性 (プロパティ) ごとに同じことを書くのが面倒だったので少しまとめてみた

radio ボタンを普通に書くと

bind(this.shadowRoot)`
...
<div onchange=${eve => {this.values.radio1 = eve.target.value; this.render()}}>
<label><input type="radio" value="xx" checked=${this.values.radio1 === "xx"}> xx</label>
<label><input type="radio" value="yy" checked=${this.values.radio1 === "yy"}> yy</label>
<label><input type="radio" value="zz" checked=${this.values.radio1 === "zz"}> zz</label>
</div>
...
`

になるかと思います
checked のチェックも value も表示する文字列も毎回 xx や yy と書いてます
変更があると面倒です

1 つ設定したらあとは this.value みたいにして参照したいのですが ここはあくまで文字列です
input という要素を元にプロパティを参照というのはこのコンテキストだとできません

ただそれも そこにスコープを作ってしまえば可能になります
label のブロック自体が繰り返しなのでそこもまとめるとこうなります

bind(this.shadowRoot)`
...
<div onchange=${eve => {this.values.radio1 = eve.target.value; this.render()}}>
${
Array.from(["xx", "yy", "zz"], e => wire(this.shadowRoot, `:radio1_${e}`)`
<label><input type="radio" value=${e} checked=${this.values.radio1 === e}> ${e}</label>
`)
}
</div>
...
`

こうすれば変数 e に xx などが入っています
HTML なので繰り返しでもそのまま書いてしまいますが JavaScript で繰り返しできるのでこれもありです
毎更新のたびにネストした ${} やループ処理が必要になるのでパフォーマンスは落ちますが関数化するようなものと考えればまぁいいでしょう

今回みたいな要素ごとに特別なこともなくただのパターンの繰り返しならこれでいいですが 要素ごとに構造が微妙に違ったり属性が違ったりとなってくると逆に直接繰り返し書いたほうがわかりやすいかもしれません

また こういうパターンがさらに繰り返して radio1, radio2, ... とあるなら関数にしてしまうのもありです

bind(this.shadowRoot)`
...
${this.createRadioGroup("radio1", ["xx", "yy", "zz"])}
...
`

// method
createRadioGroup(key, selections){
return wire(this.shadowRoot, `:${key}`)`
<div onchange=${eve => {this.values[key] = eve.target.value; this.render()}}>
${
selections.map(e => wire(this.shadowRoot, `:${key}_${e}`)`
<label><input type="radio" value=${e} checked=${this.values[key] === e}> ${e}</label>
`)
}
</div>
`
}