为什么riot.js会破坏css？

为了学习riot.js，我从著名的引导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>

this.href=opts.href
riot.mount（“*”）

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

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

借

JavaScript

---

它坏了。为什么？（原始的非破坏性示例可以在这里找到：jsfiddle.net/0hp9pwpu）

您的防暴标记被插入到防暴标记中，即发生的是

ul
    li

从你的工作实例来看

ul 
    menu-item
         li

在您的非工作示例中。由于引导设置了需要特定层次结构的导航项的样式，因此结果会被破坏

这是作为一个问题（）提出的，并使用（即）关闭，而不是直接使用riot标记，有一个选项将riot标记添加为属性。大概是

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

JavaScript

不可否认，它并没有那么语义化

---

---

Fiddle-

您的防暴标签标记被插入防暴标签，即发生的是

ul
    li

从你的工作实例来看

ul 
    menu-item
         li

在您的非工作示例中。由于引导设置了需要特定层次结构的导航项的样式，因此结果会被破坏

这是作为一个问题（）提出的，并使用（即）关闭，而不是直接使用riot标记，有一个选项将riot标记添加为属性。大概是

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

JavaScript

不可否认，它并没有那么语义化

---

---

Fiddle-

引导程序不适合与Riot.js一起使用

生成的html是：

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

---

引导css已损坏…

引导不适合与Riot.js一起使用

生成的html是：

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

---

引导css被破坏了…

也许没有那么优雅，但在riot 2.3.13中，我在.tag文件中使用了类似的内容：

<menu-bar>
  <ul list="<yield/>">
    <li each={ item in items }>
      <a href="http://localhost/pages/{ item }.html">{ titles[item] }</a>
    </li>
  </ul>

  <script>
    this.titles = {
      inventario: 'Inventario',
      resguardos: 'Resguardos',
      catalogos:  'Catálogos',
      reportes:   'Reportes',
      configurar: 'Configurar',
      utilidades: 'Utilidades'
    }
    this.items = null

    this.on('mount', function () {
      var el = this.root.querySelector('ul')
      this.items = el.getAttribute('list').trim().split(/,\s?/)
      el.removeAttribute('list')
      this.update()
    })
  </script>
</menu-bar>

此文件名={
inventario:“inventario”，
resguardos:“resguardos”，
catalogos:‘Catálogos’，
报告：“报告”，
配置器：“配置器”，
实用工具：“实用工具”
}
this.items=null
this.on（'mount'，function（）{
var el=this.root.querySelector（'ul'）
this.items=el.getAttribute（'list'）.trim（）.split（/，\s？/）
el.removeAttribute（“列表”）
this.update（）
})

现在，在HTML页面中：

<menu-bar>
  inventario,resguardos,catalogos,reportes
</menu-bar>

inventario、resguardos、catalogos、Reports

---

工作正常。

也许不那么优雅，但在riot 2.3.13中，我在.tag文件中使用了类似的内容：

<menu-bar>
  <ul list="<yield/>">
    <li each={ item in items }>
      <a href="http://localhost/pages/{ item }.html">{ titles[item] }</a>
    </li>
  </ul>

  <script>
    this.titles = {
      inventario: 'Inventario',
      resguardos: 'Resguardos',
      catalogos:  'Catálogos',
      reportes:   'Reportes',
      configurar: 'Configurar',
      utilidades: 'Utilidades'
    }
    this.items = null

    this.on('mount', function () {
      var el = this.root.querySelector('ul')
      this.items = el.getAttribute('list').trim().split(/,\s?/)
      el.removeAttribute('list')
      this.update()
    })
  </script>
</menu-bar>

此文件名={
inventario:“inventario”，
resguardos:“resguardos”，
catalogos:‘Catálogos’，
报告：“报告”，
配置器：“配置器”，
实用工具：“实用工具”
}
this.items=null
this.on（'mount'，function（）{
var el=this.root.querySelector（'ul'）
this.items=el.getAttribute（'list'）.trim（）.split（/，\s？/）
el.removeAttribute（“列表”）
this.update（）
})

现在，在HTML页面中：

<menu-bar>
  inventario,resguardos,catalogos,reportes
</menu-bar>

inventario、resguardos、catalogos、Reports

---

有效。

谢谢。尽管我不喜欢那个暴动标签（谢谢。尽管我不喜欢那个防暴标签。）(