Skip to content

Commit 039c98a

Browse files
authored
docs: illustrate usage of alternative deep selector expressions (#1647)
Without examples of the exact syntax the use of `::v-deep` and `/deep/` as alternative deep selectors is somewhat ambiguous as it’s not entirely clear where these expressions are expected.
1 parent 1c2436a commit 039c98a

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

docs/guide/scoped-css.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,19 @@ The above will be compiled into:
6262
.a[data-v-f3f3eg9] .b { /* ... */ }
6363
```
6464

65-
Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` or `::v-deep` combinator instead - both are aliases for `>>>` and work exactly the same.
65+
Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` or `::v-deep` combinator instead - both are aliases for `>>>` and work exactly the same. Based on the example above these two expressions will be compiled to the same output:
66+
67+
``` html
68+
<style scoped>
69+
.a::v-deep .b { /* ... */ }
70+
</style>
71+
```
72+
73+
``` html
74+
<style scoped>
75+
.a /deep/ .b { /* ... */ }
76+
</style>
77+
```
6678

6779
## Dynamically Generated Content
6880

0 commit comments

Comments
 (0)