为什么我的 Riot.js 标记只有一个呈现？答案

【问题标题】：Why does only one of my Riot.js tags render?为什么我的 Riot.js 标记只有一个呈现？
【发布时间】：2016-09-07 22:58:52
【问题描述】：

我有一个相对简单的页面，它从 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 链接，但这除了样式之外没有任何区别。

有什么想法吗？

【问题讨论】：

标签： javascript html web riot.js

【解决方案1】：

这不是 Riot 的问题，它是浏览器呈现自动关闭标签的方式。检查这个小提琴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检查 GianlucaGuarini 答案

【讨论】：

【解决方案2】：

它最终变得非常简单：Riot.js 的“即时编译”方面似乎不能很好地处理自闭合标签。这工作正常：

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

【讨论】：