riot-js_001_01


今回は、Riot.jsでカスタムタグでHTML・CSS・JSを定義する方法を紹介します。


カスタムタグでHTML・CSS・JSを定義するためには下記のように記述します。


index.html


<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<title>Riot.js sample</title>

<script src="./library/riot/riot+compiler.js"></script>

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

</head>
<body>

<sample></sample>

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

</body>
</html>


sample.tag


<sample>

<h1>h1タグ表示</h1>
<h3>h3タグ表示</h3>
<p>pタグ表示</p>

<style scoped>

h1 {
color: #00AA00;
}

p {
color: #0D47A1;
}

</style>

<script>

console.log('Riot.js Sample');

</script>

</sample>


index.htmlを実行すると下記のようにブラウザで表示されます。

riot-js_002_01


HTML・CSS・JSの全てが認識しているのを確認できました。


CSSの記述追加:

h1タグとpタグの色を変更。