スタイル (style)

scoped

参考:

スコープ付き CSS | vue-loader [公式]

Scoped CSS | Vue Loader [Official]

パフォーマンス

スコープ付きのスタイルでは、パフォーマンスの悪化を防ぐためにクラスの指定が必須である。タグセレクタが p[attr] { color: red; } のようにスコープされている場合 (即ち属性セレクタと組み合わされた場合) 合致する全てのタグとマッチを判定する必要があり、通常の何倍も CSS の描画が遅くなる。もし、.paragraph[attr] { color: red; } のようにクラス (もしくは ID) を使用すれば、クラスや ID に合致する要素は通常それほど多くないため、そのようなパフォーマンスの悪化は回避できる。

参考:

スコープ付き CSS | vue-loader [公式]

ルート要素

参考:

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

参考:

Scoped Styles vs CSS Modules | Netguru Blog on Vue

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です