JSFiddle - React, Tailwind, and code Playground

by int32_t

HTML

<p>Tab order is odd when using Shadow DOM slot element. Expecting the text input to be focused before the checkbox, but the reverse is happening</p>
<button autofocus>Initially focused. Press tab</button>

<div id="host1"><span slot="label"><input></span></div>
<div id="host0"><span><input></span></div>

<script>
let host = document.querySelector('#host1');
host.attachShadow({mode:'open'}).innerHTML = 'V1: <slot name="label"></slot><input type=checkbox>';

let host0 = document.querySelector('#host0');
host0.createShadowRoot().innerHTML = 'V0: <content></content><input type=checkbox>';
</script>