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>
    <yield id="name"><content select=".name"></content></yield>
    <yield id="email"><content select=".email"></content></yield>
  </template>
  
  <my-card>
    <span class="name">Ryosuke Niwa</span>
    <span class="email">rniwa@apple.com</span>
  </my-card>
  <template id="my-webkitten-name-template">
    <span>WebKitten</span> <content select=".name"></content>
  </template>
  <template id="my-webkitten-email-template">
    <span>kitten@webkit.org</span> <content select=".email"></content>
  </template>
  
  <my-webkitten-card>
    <template shadowroot>
      <style>
        :host { 
          display: block;
          border: 1px solid red;
        }
      </style>
      <yield id="name"><content select=".name"></content></yield>
      <yield id="email"><content select=".email"></content></yield>
    </template>
    <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));
});
// initialize yield/transclude plumbing
var element = document.querySelector('my-webkitten-card');
element.transclude = function(id, template) {
  var y = element.shadowRoot.querySelector('yield#' + id);
  var root = y.createShadowRoot();
  root.appendChild(template.content.cloneNode(true));
};
// pretend-constructor
element.transclude('name', document.querySelector('#my-webkitten-name-template'));
element.transclude('email', document.querySelector('#my-webkitten-email-template'));
Output

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

Dismiss x
public
Bin info
dglazkovpro
0viewers