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>Custom properties in Polymer</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
  <script src="https://www.polymer-project.org/1.0/components/webcomponentsjs/webcomponents.min.js"></script>
  <script>
    // Force Polymer to use the Shadow DOM. This only works in Chrome.
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
  </script>
  <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">  
</head>
  
<!-- If you're using custom properties, they need to go in a custom-style element -->
<!-- Normal CSS styles can also go in here -->
<style is="custom-style">
  body {
    margin: 40px;
    background-color: white;
  }
​
  /* This works, because you're styling the host, not inside the shadow DOM */
  shiny-button.fancy {
    font-family: "Lato";
    font-weight: 300;
    
    --shiny-button-background: #E91E63;
    
    --shiny-button-container: {
      text-transform: uppercase;
      border-radius:3px;
      color: white;
    };
    
    --shiny-button-text: {
      padding: 10px;
    };
    
    --shiny-button-sides: {
      text-shadow: 0 1px 1px #880E4F;
    };
  }
  
  
  /* This shows you the difference between the host and the .container. */
  /* shiny-button {
  background-color: red;
  }*/
​
  /* None of these things work, because you can't cross the shadow boundary */
  shiny-button .container {
    color: red;
    background-color: pink;
  }
​
  shiny-button .text-in-the-shadow-dom {
    font-weight: 300;
  }
  
</style>
  
<body>
  <shiny-button>hallo hai</shiny-button>
  <br><br>
  <shiny-button class="fancy">hallo hai</shiny-button>
  
  <dom-module id="shiny-button">
    <style>
        :host {
          display: inline-block;
          color: white;
        }
        .container { 
          background-color: var(--shiny-button-background, cornflowerblue);
          padding: 10px;
          border-radius: 10px;
          @apply(--shiny-button-container);
        }
        .icon {
          font-size: 20px;
          @apply(--shiny-button-sides);
        }
        .user-text {
          @apply(--shiny-button-text);
        }
        .text-in-the-shadow-dom {
          font-weight: 900;
          @apply(--shiny-button-sides);
        }
    </style>
    <template>
      <div class="container">
        <span class="icon">♡</span>
        <span class="user-text"><content></content></span>
        <span class="text-in-the-shadow-dom">!!!</span>
      </div>
    </template>
    <script>
      Polymer({
        is: 'shiny-button'
      });
    </script>
  </dom-module>
</body>
</html>
Output

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

Dismiss x
public
Bin info
notwaldorfpro
0viewers