RiotJS <yield /> генерирует пустой вывод

Question

Я разрабатываю оболочку RiotJS для Bootstrap 4. Вы можете проверить живой пример на Plunker. Там есть пользовательский тег

<item>
    <a class="dropdown-item" href="#">
        <yield/>
    </a>
</item>

Я использую это следующим образом: <item>Action</item>, получить следующий вывод:

<item>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> Action </a>
</item>

Кто-нибудь знает, почему генерируются первые 2 пустые ссылки и как их избежать?

Answer 1

Это имеет отношение к установке ваших тегов, а также <yield />, Не уверен в точной проблеме здесь, но решение вашей проблемы заключается в монтировании только самого внешнего тега, не монтируйте каждый отдельный дочерний тег явно.

Итак, в index.html в вашем примере кода замените:

<script> riot.mount('caret'); riot.mount('divider'); riot.mount('heading'); riot.mount('item'); riot.mount('content'); riot.mount('toggle'); riot.mount('dropdown'); </script>

... с:

<script> riot.mount('dropdown'); </script>