html - CSS :focus-visible for custom control

Question

一个:focus-visible始终显示 input & textarea , 并且始终显示为 button 仅当使用 tab 切换焦点时键。

问题是:由 <div tabIndex="0">....</div> 组成的自定义控件如何？ .
有时，使用 <div> 制作复杂的自定义控件会更容易& <span>并像本地控件一样设置样式。
如何制作button like <div>使用:focus-visible ?
如何制作textarea like <div>使用:focus-visible ?
如何告诉 css 指定的 <div class="my-custom-ctrl">是按钮还是文本编辑器？

See my sandbox here

Answer 1

使用 tabindex 就可以了。

.focusable:focus-visible {
    color: red;
}

<div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Can NOT be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>

<div>
Can NOT be focused
</div>
<div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Can NOT be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>