Vue LoaderのDeep Selectorの::v-deep
-
Vue.js の Scoped CSS を調べていたとき、ドキュメントの Deep Selectors の項目に ::v-deep を見つけたので、それについてです。
Deep Selector
これまで Deep Selector を利用するときには >>> もしくは /deep/ を指定することになっていました。
<style scoped>
.a >>> .b { /* ... */ }
</style><style lang="scss" scoped>
.a /deep/ .b { /* ... */ }
</style>@vue/component-compiler-utils 2.6.0 より、Deep Selector に ::v-deep が使えるようになります。今後は以下のような書き方もできます。
<style lang="scss" scoped>
.a ::v-deep .b { /* ... */ }
</style>余談
Shadow Piercing descendant combinator
/deep/ (>>>) は Shadow Piercing descendant combinator (Shadow Piercing combinator) と呼ばれるもので、現在は廃止されて主要なツールやブラウザのサポートも削除されています。例えば dart-sass は /deep/ のサポートをしていません。
JavaScript の主要なライブラリとして、Angular では、/deep/ のエイリアスとして新しいコンビネータ ::ng-deep が 4.3.0 で追加されました。しかし、将来的には ::ng-deep もサポートされなくなるので、/deep/ の問題を解決するものではありません。あくまでも、ツールの幅広い互換性のために、というスタンスのようです。Vue.js の ::v-deep もそんなところなのでしょうか。