Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
  <my-element>
    <my-child></my-child>
  </my-element>
  
  <script>
    customElements.define('my-element', class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({mode: 'open'}).innerHTML = `
            <style>
              ::slotted(*) {
                color: green;
              }
            </style>
            <slot></slot>
          `;
        }
    })
    
    customElements.define('my-child', class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({mode: 'open'}).innerHTML = `
            <style>
              :host {
                color: red;
              }
            </style>
            <span>I am green</span>
          `;
        }
    })
  </script>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
sevenupcanpro
0viewers