Estou criando um elemento personalizado para marcar exemplos (brinque com ele emhttp://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>

Isso produz a aparência que eu quero:

Algum texto [Exemplo: Introdução

Some code here

Mais exemplo -exemplo final ]

No entanto, porque torna o<my-example> elementodisplay:inline Estou preocupado que o nível de bloco<pre> elemento vai causar problemas.

Styling<my-example> Comodisplay:block obriga a iniciar uma nova linha, que é inconsistente com oPDF Eu preciso imitar.

Que tipos de problemas eu devo esperar por violar o modelo de caixa CSS como este e como posso mitigá-los?