为什么只呈现一个Riot.js标记？

Question

我有一个相对简单的页面，它从CDN加载Riot.js，从本地脚本文件加载RiotControl，从文件加载RiotControl的Store，以及两个自定义标记custom-a和custom-b。

    <div class="ui text container" id="context">
        <form class="ui form">
            <h1>A Descriptive and Lovely Header</h1>

            <div class="ui divider"></div>

            <custom-a/>

            <p>this is just a paragraph</p>
            <custom-b/>
        </form>
    </div>

    <!-- Riot.js Ceremony -->
    <script>
        RiotControl.addStore(new Store());
        riot.mount('*');
    </script>

标记正在被挂载--两个标记文件中的console.log行显示--并且事件被正确路由(再次通过console.log验证)。但是，在第一个自定义标记之后没有呈现任何内容:如果它在顶部，则显示custom-a；如果它在顶部，则显示custom-b；但是它们之间的<p>不会呈现，如果它在那里，则另一个不会呈现。

我认为这可能是CSS的一些问题，所以我从页面中删除了语义UI链接，但除了样式之外，这没有什么不同。

有什么想法吗？

Answer 1

这不是Riot的问题，而是浏览器呈现自动关闭标签的方式。检查此fiddle https://jsfiddle.net/9uezdbo9/1/

在此之前

<div>Element before</div>
<self-close/>
<div>Element after</div>

渲染

<div>Element before</div>
<self-close>
  <div>Element after</div>
</self-close>

ref：https://github.com/riot/riot/issues/1111 check GianlucaGuarini answer

Answer 2

它最终变得非常简单: Riot.js的“即时编译”方面似乎不能很好地处理自结束标记。这可以很好地工作：

<custom-a></custom-a>
<custom-b></custom-b>