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
  • …
 
​
<html>
<head>
<script>
"use strict";
​
window.addEventListener("load", function() {
  function attachShadowTemplates(root) {
    Array.from(root.querySelectorAll("template[is=shadow-root]"))
      .forEach(function(template) {
        var parentNode = template.parentNode;
        parentNode.removeChild(template);
        var delegatesFocus = template.hasAttribute('delegates-focus');
        parentNode.__shadow = parentNode.attachShadow({
          mode: 'open',
          delegatesFocus: delegatesFocus,
        });
        if (delegatesFocus) {
          parentNode.setAttribute('delegates-focus', '');
        }
        parentNode.__shadow.appendChild(template.content);
        attachShadowTemplates(parentNode.__shadow);
      });
  }
​
  attachShadowTemplates(document.body);
});
</script>
​
<style>
div {
  border: 1px solid gray;
  padding: 2px;
}
div:focus {
  border-color: red;
}
</style>
</head>
<body>
  <input>
  <div id="x-outer">
    <template is="shadow-root" delegates-focus>
      <input placeholder="x-outer shadow before slot">
      <slot></slot>
      <input placeholder="x-outer shadow after slot">
    </template>
​
    <div id="x-inner">
      <template is="shadow-root" delegates-focus>
        <input placeholder="x-inner shadow 1">
        <slot></slot>
        <input placeholder="x-inner shadow 2">
      </template>
      <input placeholder="x-inner light">
    </div>
  </div>
  <input>
</body>
</html>
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers