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>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
  
  <script>
    window.Polymer = {
      dom: "shadow"
    };
  </script>
  
  <link href="polymer/polymer.html" rel="import">
​
​
  <style is="custom-style">
    body {
      margin: 0;
      padding: 50px;
    }
    
    .test {
      background-color: red;
    }
    
  </style>
​
</head>
<body>
  
  <dom-module id="x-inner">
    <template>
      <style>
        :host {
          width: 60px;
          height: 60px;
          display: block;
          background-color: orange;
          animation: spin 1000ms infinite linear;
        }
        
        @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
        
        
      </style>
      <div>INNER</div>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-inner'
      });
    });
  </script>
  
  <dom-module id="x-app">
    <template>
      <style>
        :host {
          width: 60px;
          height: 60px;
          display: block;
          background-color: white;
          animation: spin 3000ms infinite linear;
        }
        
        
        
      </style>
      <div>APP</div>
      <x-inner></x-inner>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-app'
      });
    });
  </script>
  
  <x-app></x-app>
​
​
</body>
</html>
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers