【JavaScript】【Riot】【勉強】タグのネスト - ミライスタート　TECH系ブログ

こんばんは。とりあえず、3日続いたので一区切りを考えている石井です。

Riotでタグファイルからタグファイルをコールできるのか興味本位で調べていたら、
タグのネストがそれっぽかったので試してみました。

index.html

<html>
<body>
  <sample></sample>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.0.1/riot+compiler.min.js"></script>

  <script type="riot/tag" src="sample.tag">
  </script>

<script>
  riot.mount('sample',{ title:"テスト" })
</script>
</body>
</html>

sample.tag

<sample>
  <h2>sample.tag</h2>
  <h2>{ opts.title }</h2>
  <sample2 arg={'test2'}></sample2>
  <style>
    :scope { color:#0000FF }
  </style>
</sample>

<sample2>
  <h2>{ opts.arg }</h2>
  <style>
    :scope { color:#FF0000 }
  </style>
</sample2>

sample.tag内のsampleタグ内でsample2をコールし、
sample2タグの宣言が同ファイル下に記載したものになります。

とりあえず、タグファイルからタグファイルをコールしたら、
ソースが追い辛くなると思うので、これで満足することにします。