我认为“Spoiler”不能同时是内联和块级元素的想法是 CSS 的一个事实，用户不必了解这一点。
背景：HTML 如何处理？
考虑加粗。您今天可以在 Discourse bbcode 中这样写：
A [b]B
C[/b] D
或者您可以用 HTML 这样写：
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
它的渲染效果正如您所期望的那样：
A B
C D
但 DOM 表示看起来是这样的：
<p>A <strong>B</strong></p>
<strong> </strong>
<p><strong>C</strong> D</p>
HTML 规范要求对多块超链接做类似的事情。如果您在 HTML 中这样写：
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
HTML 规范要求 DOM 表示看起来是这样的，有 三个 超链接：
<body>
<p>A <a href="https://example.com.">B</a>
</p><a href="https://example.com."> </a>
<p><a href="https://example.com.">C</a> D</p>
</body>
我的建议：链接的 Spoiler
您可以想象以类似的方式渲染多段内联 Spoiler：
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
但 Spoiler 与加粗不同，因为 Spoiler 是 交互式 的。当您单击 Spoiler 的 B 部分时，它应该会显示 Spoiler 的 B 和 C 部分；它应该看起来和感觉像“一个 Spoiler”。
我认为处理此问题的方法是在 DOM 表示中支持链接的 Spoiler。也许 <spoiler> 会有一个像 name 这样的属性，当您单击一个 Spoiler 时，它会显示所有具有相同名称的 Spoiler。（这应该通过属性、属性还是其他链接这三个 Spoiler 的系统来完成？我不知道，随便您怎么做。）
所以，假设您有这样的 Markdown：
A B
C
D E
[spoiler]F[/spoiler]
然后您选择 B、C 和 D 并将它们模糊化。
Markdown 看起来会是这样的：
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
生成的 DOM 会是这样的：
<p>A <inline-spoiler name="x">B</inline-spoiler></p>
<block-spoiler name="x"><p>C</p></block-spoiler>
<p><inline-spoiler name="x">D</inline-spoiler> E</p>
<block-spoiler name="y"><p>F</p></block-spoiler>
在 JS 中，当您单击这三个 Spoiler 中的任何一个时，所有具有相同“name”属性的 Spoiler 都会一起显示出来。
因此，从最终用户的角度来看，它会 感觉 像是可以混合搭配内联和块级 Spoiler。