スタイル (style)
scoped
参考:
Scoped CSS | Vue Loader [Official]
パフォーマンス
スコープ付きのスタイルでは、パフォーマンスの悪化を防ぐためにクラスの指定が必須である。タグセレクタが p[attr] { color: red; }
のようにスコープされている場合 (即ち属性セレクタと組み合わされた場合) 合致する全てのタグとマッチを判定する必要があり、通常の何倍も CSS の描画が遅くなる。もし、.paragraph[attr] { color: red; }
のようにクラス (もしくは ID) を使用すれば、クラスや ID に合致する要素は通常それほど多くないため、そのようなパフォーマンスの悪化は回避できる。
参考:
ルート要素
参考:
vue-loader の Scoped CSS のスタイルが子コンポーネントのルート要素に効いてしまって辛い – Qiita
How to correctly use “scoped” styles in VueJS single file components? – Stack Overflow
Reason for vue-loader to leak classes to child components? – Hashnode
/deep/
参考:
スコープ付きCSSで別のコンポーネントにスタイルを当てる – Qiita
Support /deep/ selector · Issue #661 · vuejs/vue-loader – GitHub
Overwrite child components CCS with scoped styles (feature) · Issue #4298 · vuejs/vue – GitHub
CSS Modules
参考: