ミライスタート TECH系ブログ

株式会社ミライスタートのエンジニア達が気になったTECH系の記事等をアップしています!

【JavaScript】【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>
  <h3>{ opts.title }</h3>
  <h2>{ opts.title }</h2>

  <style>
    sample { color:#0000FF }
    sample h3 { color:#FF0000 }
  </style>
</sample>

スタイルの記載は、
自作タグ内でstyleタグで囲んで宣言します。

sample.tag

<sample>
  <h3>{ opts.title }</h3>
  <h2>{ opts.title }</h2>

  <style>
    :scope { color:#0000FF }
    :scope h3 { color:#FF0000 }
  </style>
</sample>

:scopeという記述でタグ名に頼らずにスタイルを宣言できるようです。