悪手！？Vue.jsでHTML内のインラインCSS(Styleタグ）を有効にする方法。まさかのis属性登場。

こんにちは、ケインコスゲです。

今回はVue.jsでHTML内のインラインCSS（Styleタグ）を有効にする方法についてご紹介させていただきます。

・・・といっても、本来Vue.jsを普通に使っていれば（いやVue.jsに限らず）、HTML内のインラインCSS（Styleタグ）にお世話になるってことはそうそうないと思うのですが、

例えば、古いコードが残っているプロジェクトとかで、それを改修しないといけない＆Vue.jsを導入するっていう時に、「あ、実はインラインのstyleタグが大量に存在していた！即座に直すの難しいし、、、取り急ぎ正常に動くように対応したい」っていうときに、今回ご紹介する方法が有効になると思います。

そもそもVue.jsを用いてSPAでプロジェクト作成をしているとか、そういうケースには全く当てはまらないと思いますので、ニッチな状況を打破したいという方はぜひ今回のブログをお読みください。笑

Vue.jsの影響下でstyleタグを書くとどうなるのか

まずは、 Vue.jsの影響下でstyleタグが書かれているとどういう動き・挙動になるのでしょうか。サンプルコードを用意してみました。

<script async src="//jsfiddle.net/majikarikeruo/c0m37z42/3/embed/"></script>

上記サンプルコードをご覧になってみてください。Google Chromeなどの検証ツールでconsole部分を確認すると、

 Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed

というエラーメッセージが表示されます。

これは要するにVue.js影響下にstyleタグを書いても変換して表示はされませんよ！という意味なんです。

さて困った、こんな時に最悪中の最悪の方法として登場するのが、HTMLのis属性を使った方法です。

先ほどご紹介したようなサンプルコードのケースの場合、どのように対処するかというと、

  <style>
    p{
      font-size:18px;
    }
  </style>

と書かれている箇所を

  <div is="style">
    p{
      font-size:18px;
    }
  </div>

と記述修正することによって、なんとVue.jsの影響下でもstyleタグが有効になるのです！

具体的には、is=”style”と書くことによって、divタグがstyleタグに化けるようになるんです。なんというハックなんでしょうか笑

is属性については僕は大した知見もないのですが、このブログを書いている2019年6月末現在ではIE11も含めて有効なようです。

ということで、今回は「悪手！？Vue.jsでHTML内のインラインCSS(Styleタグ）を有効にする方法。まさかのis属性登場」という内容でお送りいたしました。

冒頭あたりでも申し上げましたが、今回ご紹介した方法にはそもそもお世話にならないのが1番です。僕もそうですが、日々勉強・精進していきたいなと改めて思いました。