search

smileyby / notes

GitHub Issues Blog, powered by GitHub Issues and GitHub Actions
2 stars 0 forks source link

::v-deep >>> /deep/ 原理以及不生效的原因 #258

Open smileyby opened 1 year ago

smileyby commented 1 year ago

.a >>> b { xxx } 不生效！！

smileyby commented 1 year ago

vue css scoped 编译步骤

  1. 给组件生成唯一的标识 id
  2. 给组件模板中的每一个标签，添加属性 data-v-xxxx
  3. 给 scoped 下的选择器的最后一级增加属性选择器：.a .b => .a .b[data-v-xxxx]

在样式中 添加了 >>> /deep/ ::v-deep 后 编译步骤

  1. 给组件生成唯一的标识 id
  2. 给组件模板中的每一个标签，添加属性 data-v-xxxx
  3. 给 “深度穿透” 前面的的选择器增加属性选择器：.a::v-deep .b => .a[data-v-xxxx] .b
smileyby commented 1 year ago

在scoped下 使用 样式穿透时 .a::v-deep .b{ xxx }，需要保证前面的 类名a在当前组件内，a元素才会被添加 唯一标记，继而通过 .a[data-v-xxx] 来选中下面的元素；

如果 a元素不再组件内，a元素就不是被追加 唯一标识 .a[data-v-xxx] 就没有选中任何元素，样式也就不会生效了

smileyby commented 1 year ago

deep 编译后可以选中子组件内部节点的原因：

组件a ：<div class="bug">aaa</div> 组件b：<div class="container-b"><componentA /></div>

不加deep：.container-b .bug => 编译后 => .container-b .bug[data-组件b的样式hash值]

加deep：.container-b .bug => 编译后 => .container-b[data-组件b的样式hash值] .bug

默认加scoped的样式是给最后一个选择器添加scoped独有的hash属性值，加了deep是把最deep后面节点的hash值放在deep前