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>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      color: red;
      font-size: 30px;
    }
  </style>
</head>
<body>
​
<template id="element-one-template">
  <style>
    :host {
      border: 2px solid;
      color: blue;
    }
  </style>
  <content></content>
</template>
​
<template id="element-two-template">
  <style>
    :host(*) {
      color: green;
    }
    :host(element-two) {
      border: 2px solid green;
    }
  </style>
  <content></content>
</template>
​
<template id="element-three-template">
  <style>
    :host-context(*) {
      color: purple;
    }
    :host-context(body) {
      border: 2px solid purple;
    }
  </style>
  <content></content>
</template>
​
<script>
document.registerElement('element-one', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: { value: function() {
      var template = document.getElementById('element-one-template');
      this.createShadowRoot().innerHTML = template.innerHTML;
    }}
  })
});
document.registerElement('element-two', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: { value: function() {
      var template = document.getElementById('element-two-template');
      this.createShadowRoot().innerHTML = template.innerHTML;
    }}
  })
});
document.registerElement('element-three', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: { value: function() {
      var template = document.getElementById('element-three-template');
      this.createShadowRoot().innerHTML = template.innerHTML;
    }}
  })
});
</script>
​
<element-one>element-one</element-one>
<element-two>element-two</element-two>
<element-three>element-three</element-three>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers