Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Transclusions Brainstorming</title>
</head>
<body>
  <template id="my-card-shadow">
    <style>
      :host { 
        display: block;
        border: 1px solid red;
      }
    </style>
    <content select=".name"></content>
    <content select=".email"></content>
  </template>
  <template id="my-webkitten-card-shadow">
    <style>
      :host { color: blue; }
      span { display-box: contents; }
    </style>
    <shadow>
      <span class="name"><span>WebKitten</span> <content select=".name"></content></span>
      <span class="email"><span>kitten@webkit.org</span> <content select=".email"></content></span>
    </shadow>
  </template>
  
  <my-card>
    <span class="name">Ryosuke Niwa</span>
    <span class="email">rniwa@apple.com</span>
  </my-card>
  
  <my-webkitten-card>
    <span class="name">Ryosuke Niwa</span>
    <span class="email">rniwa@apple.com</span>
  </my-webkitten-card>
</body>
</html>
 
// initialize shadow roots
var myCardTemplate = document.querySelector('#my-card-shadow');
['my-card', 'my-webkitten-card'].forEach(function(name) {
  var root = document.querySelector(name).createShadowRoot();
  root.appendChild(myCardTemplate.content.cloneNode(true));
});
// add extra shadow root to my-webkitten-card-shadow
document.querySelector('my-webkitten-card').createShadowRoot().appendChild(
  document.querySelector('#my-webkitten-card-shadow').content.cloneNode(true));
Output

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

Dismiss x
public
Bin info
dglazkovpro
0viewers