◆ label をクリックすると関連づいてる input でもクリックイベントが起きる

なぜかクリック時に同じ処理が 2 回起きておかしなことになっていました
原因を調べているとクリックイベントが 2 回起きていました
WebComponents とか絡んでいたのでどこかのコンポーネントにバグがあるのかそもそもブラウザ側の問題なのかとか考えたのですが 原因は単純に label でした

WebComponents 関係なく label が input に関連づいていると input 側でもイベントが起きます

<!doctype html>

<label><input hidden> label</label>

<label for="k">label</label>
<input id="k" hidden>

<script>
document.body.addEventListener("click", eve => {
console.log(eve.target)
})
</script>

for を使ってる方と使ってない方 2 つありますが どちらの場合も同じで label をクリックしたら 2 回 console.log が呼び出されます

<label>​…​</label>​
<input hidden>​

<label for=​"k">​label​</label>​
<input id=​"k" hidden>​

label の中に input があるタイプで

const label = event.target.closest("label")
if (label) {
// ラベルをクリック時にラベルになにかする
}

のようにラベルのクリック時になにかするような処理を書いていると input 分と合わせて 2 回実行されます
event.target が違うので input クリック分は無視するようにする必要があります