RiotJSでネストしたかっただけなのに...

こんな事に半日使ったのかといまだにモヤモヤする。

大文字でタグを書いた場合ネストしたタグは動かない(異常系)

<html>
<body>
  <!--※※※動かないコード※※※-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
  <test></test>

  <script type="riot/tag">  <!--親タグ-->
  <test>
    <h2>{ opts.title }</h2>
    <TEST2 arg={'子タグ(ネストするタグ)'}></TEST2>
  </test>
  </script>

  <script type="riot/tag">  <!--子タグ(ネストするタグ)-->
  <TEST2>
    <h2 style="color:#FAA;">{ opts.arg }</h2>
  </TEST2>
  </script>

  <script>
    riot.mount('test',{title: "親タグ"});
  </script>
</body>
</html>

原因:タグが半角になっている

f:id:surume_Reflection:20161211131505p:plain

↑の正常版

<html>
<body>
  <!--※※※正常コード※※※-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
  <test></test>

  <script type="riot/tag">  <!--親タグ-->
  <test>
    <h2>{ opts.title }</h2>
    <test2 arg={'子タグ(ネストするタグ)'}></test2>
  </test>
  </script>

  <script type="riot/tag">  <!--子タグ(ネストするタグ)-->
  <test2>
    <h2 style="color:#FAA;">{ opts.arg }</h2>
  </test2>
  </script>

  <script>
    riot.mount('test',{title: "親タグ"});
  </script>
</body>
</html>