Riot.js v3 (IE11) と v6(IE11非対応) の書き方の違い

version 3 (v3.13.2)

項目	v3	v6
IE9対応	(要確認)	×
IE11対応	〇	×
compile指定	〇不要	×必要
type名指定	<script src="a.htm" type="riot/tag"></script>	<script src="a.htm" type="riot"></script>
tagの中にscriptタグ	〇可能	×不可能

• version 3 はIE11対応している、
• version 6 との大きな違いは、type名。

version3の書き方

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

<script>
  riot.mount('sample')
</script>

version6の書き方

<script src="my-sample.htm" type="riot"></script>

<script>
(async function main() {
  await riot.compile()
  riot.mount('sample')
}())
</script>

version 3 の例

index.html

<sample />
<script src="my-sample.htm" type="riot/tag"></script>
<script src="//unpkg.com/riot@3/riot+compiler.min.js"></script>

<script>
  riot.mount('sample')
</script>

my-sample.htm

<sample>
    <h1>ハロワ4</h1>
    <h2>ハロワ5</h2>
</sample>

version 6 (v6.0.1)

ドキュメント

• https://github.com/riot/riot/releases
  • 2021/7/24時点では 最新版は 6.0.1

サンプル

• index.html
• my-sample.htm

index.html

<sample />
<script src="my-sample.htm" type="riot"></script>
<script src="//unpkg.com/riot@6/riot+compiler.min.js"></script>

<script>
(async function main() {
  await riot.compile()
  riot.mount('sample')
}())
</script>

my-sample.htm

<sample>
    <h1>ハロワ4</h1>
    <h2>ハロワ5</h2>
</sample>