カスタム要素を使った、タブフォーカスの抑止

はじめに

ダイアログを表示した場合、タブで後ろのコンテンツにフォーカスが行かないようにしたいなど、
タブによるフォーカスの遷移を抑止したい場合がかなりあると思います。
そんなときに役に立つ小技を見つけたので共有します。

環境

• Chrome, Firefoxで確認

やり方

CustomElementを用意

shadow domの中に子要素を表示するだけのカスタム要素を用意します。

customElements.define(
    "custom-element", 
    class CustomElement extends HTMLElement {
        constructor(){
            super()
            this.attachShadow({mode: "open"})
            this.shadowRoot.appendChild(document.createElement("slot"))
        }
    }
)

使う

<div>
    <h3>親のカスタム要素にtabindex="-1"</h3>
    <custom-element tabindex="-1">
        <input type="text">
        <input type="text">
        <input type="text">
    </custom-element>
</div>
<div>
    <h3>親の要素にtabindex="-1"</h3>
    <div tabindex="-1">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</div>

カスタム要素にtabindex="-1"を指定するだけでその子要素にフォーカスが行かなくなります。
たぶん仕様です。たぶん

※もっとスマートな方法があったら教えてくださいmm

以上