Css 当display:inline自定义元素包含display:block元素时会出现什么问题？

我正在构建一个自定义元素来标记示例（在以下位置使用它）：

：主机{显示：内联}
[示例：
-[结束示例]
一些文字介绍
Some code here

更多示例-结束示例]

但是，因为它使
元素
显示：inline
我担心块级
元素会导致问题

将
样式设置为
显示：block
强制它从新行开始，这与我需要模仿的内容不一致

像这样违反CSS框模型，我会遇到什么样的问题？如何缓解这些问题？
这在中指定，它描述了匿名块框

规范中的描述非常详细，所以我不在这里引用，但基本上发生的是
元素的内联部分，包括
，被重新定位到
周围的匿名块框中
更多示例
-[结束示例]

当然，请注意，
元素实际上并不是这样分割的——本图中的开始和结束标记分隔生成的框，而不是元素本身。就影子DOM而言，
元素仍然被认为是
元素的子元素，而整个
元素仍然只是一个元素。
一个已知的问题是
元素在
之前自动关闭，但这是HTML解析器的问题，而不是CSS框模型的问题，我可以通过将
替换为包装它的新自定义元素来修复它。默认情况下，元素是
display:inline
，因此您可以放弃
。
关闭很烦人。为了让PDF中的一些示例正常工作，我不得不将内容改为
：如果您希望内联渲染某些内容，但能够包含块级元素，则另一个尝试是
display:inline block
。@ScottMiles，不幸的是，
inline block
使示例呈现为以“Some text”开头的行中的单个框：
<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>