Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<head>
  
  <meta charset="utf-8">
  <base href="http://milestech.net/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <style is="custom-style">
    story-card {
      --test-theme: {
          font-family: Verdana;
          font-size: 5em;
        };
    }
  </style>
</head>
<body>
  
  <p>An example of <code>&lt;story-card&gt;</code>:</p>
  <story-card story-content="Test Content"></story-card>
  <dom-module id="story-card">
    <style>
      :host {
        display: block;
      }
      
      /* uncomment to mess up (?) --test-theme */
      /*
      #story-card .story-content {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2em;
        @apply(--test-theme);
      }
      */
      
      .story-content {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2em;
        @apply(--test-theme);
      }
    </style>
    <template>
      <div id="story-card" elevation="3">
        <span class="story-content">{{storyContent}}</span>
      </div>
    </template>
    <script>
      
      Polymer({});
      
    </script>
  </dom-module>
</body>
Output

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

Dismiss x
public
Bin info
sjmilespro
0viewers