为什么只有一个我的Riot.js标签呈现

Why does only one of my Riot.js tags render?

本文关键字:标签 js Riot 有一个 我的 为什么      更新时间:2023-09-26

我有一个相对简单的页面,从CDN加载Riot.js,从本地脚本文件加载RiotControl,从文件加载RiotControl的Store,以及两个自定义标记custom-acustom-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链接,但这除了样式之外没有什么区别。

任何想法?

这不是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答案

结果非常简单:Riot.js的"即时编译"方面似乎不能很好地处理自关闭标记。

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