Estoy creando un elemento personalizado para marcar ejemplos (jugar con él enhttp://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>
  Some text <my-example>Introduction
  <pre>Some code here</pre>
  More example</my-example>
</div>

Esto produce la apariencia que quiero:

Algún texto [Ejemplo: Introducción

Some code here

Más ejemplo -ejemplo final ]

Sin embargo, porque hace que el<my-example> elementodisplay:inline Me preocupa que el nivel de bloque<pre> El elemento va a causar problemas.

Estilo<my-example> comodisplay:block lo obliga a comenzar en una nueva línea, que es inconsistente con elPDF Necesito imitar

¿Qué tipo de problemas debo esperar al violar el modelo de cuadro CSS como este, y cómo puedo mitigarlos?