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 もそんなところなのでしょうか。

参考