What goes wrong when a display:inline custom element contains display:block elements?

Question

I\'m building a custom element to mark up examples (play with it at http://jsbin.com/kiboxuca/1/edit):

Answer 1

This is specified in section 9.2.1.1 of the CSS2.1 spec, which describes anonymous block boxes.

The description in the spec is pretty verbose, so I will not quote it here, but basically what happens is that the inline portions of your <div> element, including <my-element>, are relocated into anonymous block boxes surrounding the <pre> block box. The "Some text " bit that precedes the <my-example> element is contained in its own anonymous inline box, while the <my-example> element generates its own inline box as usual, except that it is split into the anonymous block boxes that are generated around the <pre> box.

While it might not make much sense for an inline box to contain a block-level box — after all, the spec does say to break it up into a bunch of anonymous boxes for the purposes of rendering — the behavior in such a case is very well-defined and therefore (or at least, it should be) reliable across browsers. You should not run into any problems aside from obscure browser bugs, of which there are none I am currently aware of, although Chrome has been known to act downright weird with a elements containing block boxes.

Here's an 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 that the <my-example> element isn't actually split like that — the start and end tags in this illustration delimit the boxes that are generated, rather than the elements themselves. In terms of the shadow DOM, the <pre> element is still considered a child of the <my-example> element, and the entire <my-example> element is still just one element.