在App.svelte中嵌套<p>与<pre>标签报错，求解决方案

报错原因 #

HTML规范里，<p>属于仅能容纳行内元素和文本的容器，不能嵌套块级元素，而<pre>是标准的块级元素。

浏览器解析代码时，遇到<pre>会自动提前闭合前面的<p>，最终生成的DOM结构变成：

<p></p>
<pre>test</pre>
</p> <!-- 这个闭合标签没有对应的开启标签，属于无效结构 -->

Svelte的编译器会严格校验HTML结构合法性，因此抛出错误提示</p> attempted to close <p> that was already automatically closed by <pre>。

解决办法 #

有两种简单的修复方式：

• 把<p>替换成支持嵌套块级元素的容器，比如<div>：

  <div>
    <pre>
      test
    </pre>
  </div>
  

• 如果不需要额外的容器，直接移除<p>标签：

  <pre>
    test
  </pre>
  

内容的提问来源于stack exchange，提问作者Rinaldo Rasa