Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<style>
*:focus {
  outline: 2px dashed red;
}
​
div {
  border: 1px solid grey;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
}
</style>
​
<div>D1: <input tabindex="1"></div>
​
<div id="host1" tabindex="5">
  <div slot="A">R1A2: <input tabindex="2"></div>
  <div slot="B">R1B2: <input tabindex="2"></div>
  <div slot="A">R1A1: <input tabindex="1"></div>
  <div slot="B">R1B1: <input tabindex="1"></div>
  <div>Rx (not assigned): <input tabindex="1"></div>
</div>
​
<div>D2: <input tabindex="2"></div>
​
<div id="host2" tabindex="-1">
  <div slot="A">R2A: <input tabindex="1"></div>
  <div slot="B">R2B: <input tabindex="1"></div>
</div>
​
<div>D3: <input tabindex="3"></div>
​
<div id="host3" tabindex="6">
  <div slot="A">R3A1: <input tabindex="1"></div>
  <div slot="A">R3A-1: <input tabindex="-1"></div>
  <div slot="A">R3A2: <input tabindex="2"></div>
  <div>Rx (not assigned): <input></div>
</div>
​
<div>D4: <input tabindex="4"></div>
​
<template id="t">
  <style>
  *:focus {
    outline: 2px dashed green;
  }
  div {
    border: 1px solid grey;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
  }
  </style>                                                                                          
  <div>R1: <input tabindex="1"></div>
  <div>R4: <slot name="A" tabindex="4"></slot></div>
  <div>R2: <input tabindex="2"></div>
  <div>R5: <slot name="B" tabindex="5"></slot></div>
  <div>R3: <input tabindex="3"></div>
</template>
​
<script>
function stamp(host_sel, template_sel) {
    var host = document.querySelector(host_sel);
    var tmpl = document.querySelector(template_sel);
    var root = host.attachShadow({mode: 'open'});
    root.appendChild(document.importNode(tmpl.content, true));
}
​
stamp('#host1', '#t');
stamp('#host2', '#t');
stamp('#host3', '#t');
​
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tkochi-workpro
0viewers