割とバッドノウハウな手段。
Vue.js のテンプレート部分にスタイルシートを書きたくなることがあります。 単一ファイルコンポーネントを使っているなら、それの<style>に書けば事足りますが、 CDN とかでさくっとやってるようなときはそうは行かない。
とはいえ、実際に書いてみると、
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
といった警告が出て、<style>部分が削除されます。ざっくり約すと、『テンプレートはUIの定義するものだから、<style>みたいな他に影響のあるタグを置くんじゃねえ！』といった感じでしょうか。
というわけで、記述できない・・・というわけでもなく、回避手段がありました。
HTML には is 属性というのがありまして、どうやら標準の要素をカスタム要素のように動作させるという指定…とかくと分かりづらいですが、要はタグを別の要素に返信させるもの。たとえば、
<span is=”a” href=”./hoge.html”>リンク</span>
と書くと、記述してるのは span タグですが、ブラウザ上では a タグになり、普通にリンクが貼られます。ブラウザの対応状況は微妙なのですが、 Vue だとテンプレートレベルで対応してくれるようなので安心です。
というわけで、これを使えばエラーを回避してスタイルシートを書くことができます。
具体的には、
といった感じ。コンポーネントのテンプレートにこれを記述すると、中に書いた部分がスタイルシートとして評価され、そのコンポーネントが表示されると背景が赤くなります。これはひどい。