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>
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <script>Polymer={dom:'shadow'}</script>
  <link rel="import" href="https://cdn.rawgit.com/Polymer/polymer/0.8-preview/polymer.html">
</head>
<body>
  <x-test>
    <div class="special">Hi!</div>
  </x-test>
  
  <dom-module id="x-nug">
    <style>
      ::content ::content .special {
        background: orange;
      }
    </style>
    <template>
      <content></content>
    </template>
    <script>
    addEventListener('HTMLImportsLoaded', function() {
      Polymer({
        is: 'x-nug'
      });
    });
  </script>
  </dom-module>
  
  <dom-module id="x-test">
    <template>
      <x-nug><div><content></content></div></x-nug>
    </template>
    <script>
    addEventListener('HTMLImportsLoaded', function() {
      Polymer({
        is: 'x-test'
      });
    });
  </script>
  </dom-module>
  
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
sorvellpro
0viewers