Почему только один из моих тегов Riot.js визуализируется?

Question

У меня есть относительно простая страница, которая загружает Riot.js из CDN, RiotControl из локального файла сценария, Store для RiotControl из файла и два пользовательских тега 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, так как браузер делает самозакрывающиеся теги. Проверить эту скрипку 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> 

исх: https://github.com/riot/riot/issues/1111 проверка GianlucaGuarini ответить

Answer 2

В конце концов, это удивительно просто: аспект «компиляции на лету» Riot.js, похоже, не очень хорошо справляется с самозакрывающимися тегами. Это отлично работает:

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