css - Simple styling in Polymer 1.0 -


i'm trying grips polymer 1.0 after doing little work 0.5. i'm struggling should simple styling problem. can't seem apply style custom element.

here element definition, my-element.html:

<link rel="import" href="../core/polymer/polymer.html">  <dom-module id="my-element">     <template><h1>hello world</h1></template> </dom-module> <script> polymer({     is: 'my-element', }); </script> 

and here main page using it, index.html:

<!doctype html> <html> <head>     <script src="../core/webcomponentsjs/webcomponents-lite.min.js"></script>     <link rel="import" href="my-element.html"> </head> <body>     <my-element></my-element> </body> </html> 

this works fine... suppose want put style on instance of my-element. add index.html:

    <style>         my-element {             margin-top: 50px;         }     </style> 

nothing happens, no margin added. stangely elements inspector in chrome doesn't seem "see" custom element, looks it's floating outside page , doesn't enclose elements contained within. see screenshot:

screenshot

i suspected bug in chrome it's same problem in firefox.

any appreciated, many thanks.

try putting attribute is="custom-style" on style tag.

<style is="custom-style">     ... </style> 

also, default element displayed inline, can change applying display property in element :host style.

<dom-module id="my-element">   <style>     :host {display: block;}   </style>   <template>     ...   </template> </dom-module> 

Comments

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -