slot and navigation

Sequential Focus Navigation and Slot element

by Takayoshi Kochi

HTML

<div id="host">
  <input id="i1" slot="slot1">
  <input id="i2" slot="slot2">
</div>

JavaScript

var host = document.querySelector("#host");
var root = host.attachShadow({mode: 'open'});
root.innerHTML = '<div id="host2"><slot name="slot2"><slot name="slot1"></div>';

var host2 = root.querySelector('#host2');
var root2 = host2.attachShadow({mode: 'open'});
root2.innerHTML = '<input id="i3"><slot></slot><input id="i4">';