html - How do I use the new css feature in Polymer? -


i trying change css on paper-header-panel. according docs on polymers website can simple change shadow with:

paper-header-panel {   --paper-header-panel-shadow: {       height: 6px;       bottom: -6px;       box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);   }; } 

sadly can't work... tried change color on paper-toolbar, not work.

here code:

<!doctype html> <html> <head> <!-- polymer --> <script src='bower_components/webcomponentsjs/webcomponents.js'></script> <link rel='import' href='bower_components/polymer/polymer.html'> <link rel='import' href='bower_components/paper-header-panel/paper-header-panel.html'> <link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'> <link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'>  <meta charset='utf-8'> <title>test</title>  <style> paper-header-panel {   --paper-header-panel-shadow: {       height: 6px;       bottom: -6px;       box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);   }; } paper-toolbar {   --paper-toolbar-background: green;   --paper-toolbar-color: white; } </style> </head> <body class='fullbleed layout vertical'>   <paper-header-panel class='flex'>     <paper-toolbar>       <div>title</div>     </paper-toolbar>   </paper-header-panel> </body> </html> 

where things go wrong?

i found reason. had set style is='custom-style'.

<style is='custom-style'> paper-header-panel {   --paper-header-panel-shadow: {       height: 6px;       bottom: -6px;       box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);   }; } paper-toolbar {   --paper-toolbar-background: green;   --paper-toolbar-color: white; } </style> 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -