scoped style 影响同样式名的子组件

[guaijie]

Vue version

3.5.3

Link to minimal reproduction

https://play.vuejs.org/#eNqdUsFOwzAM/RWTS0FCLQJOo5sEaBJwAARIXHKpWq/LSJMoSUdR1X/HSdmYBOPALfZ7z36207NLY9J1i2zCcldaYTw49K2ZcSUao62HHiwuYICF1Q0kRE220LVuzFc+zUIQKhHMVamV89C4GqZBfpjcoJQaXrWV1UFyxFWejd2oDwUeGyMLjxQB5JVYQykL56acmaJGzmIeoO+p4jCMQR67Z6MkIw298mynUu78h0RwpTZYUZyGWtAHvimqSqh6AqcnprvgikpGS0EwY8fMk0gtRJ2unFa0mijirKSOQqJ9MF7QgJxNxnIBK2i+97uY87bF402+XGL59kt+5bqQ4+zRokO7pim3mC9sjX6E58/32NF7Cza6aiWx/wCf0GnZBo8j7apVFdne4UW3t/GKtIcXN+88KrcZKhgNzCHyOaOrhmXvG/3b7ll6HnW0Udri5kf8+Fv/On65FLLae2w2fALu7u5V

Steps to reproduce

父组件 scoped style 中样式命中了子组件根节点的同名样式

What is expected?

父组件 scoped style 中样式不应该命中子组件根节点的同名样式

What is actually happening?

no response

System Info

No response

Any additional comments?

No response

[linzhe141]

https://cn.vuejs.org/api/sfc-css-features.html#child-component-root-elements

[Justineo]

As @linzhe141 pointed out, this is the expected behavior and it's kind of a trade-off.

[guaijie]

As @linzhe141 pointed out, this is the expected behavior and it's kind of a trade-off.

@Justineo 已经有 :deep 了，还设计的这么复杂干嘛，这样同名样式很容易在不经意间被影响，要小心这么多你们定制的规则，就不能设计的简单点，符合直觉点，不要靠那么多补充来解释出现的问题吗? 我要真想动布局，我不知到给组件传一个 class 或者使用 :deep

@Justineo 这样设计无疑给开发者造成了负担，同样是作用于组件的样式。书写样式规则时，有些地方可以不用 :deep , 有些必须使用 :deep ，这会导致混乱。因为我得明确这是在作用于子组件的根元素。但在使用 scoped, 这是对父组件封闭的，我并不知道子组件根元素的样式名。所以加上 :deep 是在明确表示这块样式作用区域扩大到子组件，我可以进行样式上的耦合操作。但是，我们应该尽量避免这样做。
所以，如果只是影响根元素，最好的做法就是给子组件添加一个 class 。这样我无需知道子组件的样式名，也不会因为有的地方不使用 :deep 有效，有些地方又没有效而导致混乱

[guaijie]

@linzhe141

你发的补充的解释又将前面的解释推翻了。这设计的真是让人无语，我要真想动布局，我不知到给组件传一个 class 或者使用 :deep

[Justineo]

所以，如果只是影响根元素，最好的做法就是给子组件添加一个 class 。这样我无需知道子组件的样式名，也不会因为有的地方不使用 :deep 有效，有些地方又没有效

你好像还是有一些误解，Vue 并不能区分 class 定义来自哪个组件。核心问题是子组件的根元素是否能被父组件的样式匹配到，如果匹配不到，你在父组件加了 class 依然匹配不到，你不能每个组件都用 :deep 来写定位吧。

PS. 如果你有简单又完备的方案，能解决现存的问题，欢迎去 https://github.com/vuejs/rfcs 完整阐述你的想法。仅仅 diss 和抱怨无法改善现状。

[edison1105]

使用css module 啊

[guaijie]

你好像还是有一些误解，Vue 并不能区分 class 定义来自哪个组件。核心问题是子组件的根元素是否能被父组件的样式匹配到，如果匹配不到，你在父组件加了 class 依然匹配不到，你不能每个组件都用 :deep 来写定位吧。

@Justineo 你好像对我说的有些误解，或者你没能完全理解我所表达。

1. 你们在文档中的说明和补充说明其实是互相矛盾
2. scoped 设计是否应该要足够简单和符合直觉
3. 文档中明确表达 scoped 这样设计的目的是方便作用于子组件的根元素
4. 如果我只想作用于子组件的根元素，更推荐的做法是手动添加一个 class
5. 按照你们的设计和文档的描述，我作用于子组件的根元素可以不用 deep ， 其他时候需要用 deep。这意味，我需要提前明确我现在作用的到底是不是根元素上的 class。但事实上，你是不知道的，因为你用了 scoped，这决定了子组件的样式对父组件而言是封闭的。而使用 deep 就是在告诉其他开发，我现在做的就是要扩大其样式作用范围，且明确知道子组件的所有 class 命名，并进行样式的耦合操作
6. 根据以上，为什么说是样式耦合，因为我的子组件样式名是可能发生变化的。使用 deep 就是在告诉开发注意这点，你改子组件时的 class 名时，也要记得改父组件的样式。
7. 根据以上，所以我为什么觉得这样设计不合理。而且这样设计还隐藏了一个问题，就是父组件的 class 名和子组件的 class 名不允许一样

<template>
  <div class="page">
    <Comp class="comp" />
   
    // 如果该组件根元素的 class 名为 page
    // 无形之中父组件的样式会影响到了 Page 组件的样式
    <Page />
  </div>
</template>
<style scoped>
  // 只想作用于子组件的根元素，推荐：
  .comp {
 }

  // 只想作用于子组件的根元素，不推荐
  // 另一个开发者看来，这是个 bug, 因为他并不清楚这是作用于子组件的根元素
  .page > .innerComp {

  }

  // 这里明确指明我在作用于子组件样式
 .page :deep(.form-item) {
    
 }
</style>

[Justineo]

如果你有简单又完备的方案，能解决现存的问题，欢迎去 https://github.com/vuejs/rfcs 完整阐述你的想法。

[guaijie]

使用css module 啊

在知道这个问题时，都是使用的 scoped。况且，这是设计的问题，所以提出我的看法