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 cause problems.

styling <my-example> display:block forces start on new line, inconsistent pdf need imitate.

what sorts of problems should expect violating css box model this, , how can mitigate them?

this specified in section 9.2.1.1 of css2.1 spec, describes anonymous block boxes.

the description in spec pretty verbose, not quote here, happens inline portions of <div> element, including <my-element>, relocated anonymous block boxes surrounding <pre> block box. "some text " bit precedes <my-example> element contained in own anonymous inline box, while <my-example> element generates own inline box usual, except split anonymous block boxes generated around <pre> box.

while might not make sense inline box contain block-level box — after all, spec break bunch of anonymous boxes purposes of rendering — behavior in such case well-defined , therefore (or @ least, should be) reliable across browsers. should not run problems aside obscure browser bugs, of there none aware of, although chrome has been known act downright weird a elements containing block boxes.

here's illustration:

<polymer-element name="my-example" noscript>   <!-- ... --> </polymer-element> <div>    <anonymous-block>     <anonymous-inline>some text </anonymous-inline>     <my-example>       [ <em>example:</em>       introduction     </my-example>   </anonymous-block>    <pre>some code here</pre>    <anonymous-block>     <my-example>       more example       — <em>end example</em> ]     </my-example>   </anonymous-block>  </div> 

note of course <my-example> element isn't split — start , end tags in illustration delimit boxes generated, rather elements themselves. in terms of shadow dom, <pre> element still considered child of <my-example> element, , entire <my-example> element still 1 element.