css - 为什么 riot.js 会破坏 css？

Question

为了学习 riot.js，我从著名的 bootstrap navbar 示例开始。然后我使用 riot.js 添加了我的自定义标签:

<script type="riot/tag">
  <menu-item>
    <li><a href={this.href}><yield/></a></li>
    this.href = opts.href
  </menu-item>
</script>

<script src="https://cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)"></script>
<script>
  riot.mount('*')
</script>

最后我尝试使用我的新标签，替换

<li><a href="http://getbootstrap.com/javascript">JavaScript</a></li>

通过

<menu-item href="http://getbootstrap.com/javascript">JavaScript</menu-item>

Result被打破。为什么？ (可以在此处找到原始的非损坏示例:jsfiddle.net/0hp9pwpu)

Answer 1

您的 riot 标签标记已插入到您的 riot 标签中，即发生的事情是

ul
    li

从你的工作示例来看实际上是

ul 
    menu-item
         li

在您的非工作示例中。由于 bootstrap 对导航项设置了特定层次结构的样式，因此您的结果是错误的。

这是作为问题提出的 (https://github.com/riot/riot/issues/295) 并使用 https://github.com/riot/riot/pull/569 关闭也就是说，不是直接使用 riot 标签，而是可以选择将 riot 标签添加为属性。所以像

<li riot-tag="menu-item" href="http://getbootstrap.com/javascript">JavaScript</li>

不可否认，它不是语义化的

---

fiddle - http://jsfiddle.net/86khqhwu/