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:

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
Post a Comment