css - What goes wrong when a display:inline custom element contains display:block elements? -
i'm building custom element mark examples (play @ http://jsbin.com/kiboxuca/1/edit ): <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script> <polymer-element name="my-example" noscript> <template> <style> :host { display: inline } </style> [ <em>example:</em> <content></content> — <em>end example</em> ] </template> </polymer-element> <div> text <my-example>introduction <pre>some code here</pre> more example</my-example> </div> this produces appearance want: some text [ example: introduction some code here more example — end example ] however, because makes <my-example> element display:inline i'm worried block-level <pre> element going ...