关于scoped是否有必要的问题
来源：5-11 创建搜索框组件
猿力
2021-07-31
我一般都是在最外层写上一个全局唯一的container类，用命名空间的概念来做样式隔离，因为scoped会增加一些垃圾代码，不知道老师对于这个问题的看法是怎样的？
代码案例：这莫非是个bug，我这边加不加scoped，他的样式都没有渲染进去
问题更新
如下图所示，我新创建了一个test组件，并在父组件中进行了引用，同时创建了和【my-search-container】一模一样的css选择器，但是却并没有进行覆盖，这是hbuilderx帮我们做的隔离么？究竟在什么情况下会出现样式的渗透呢？
3回答
-
你是在微信小程序端进行的渲染。
因为uniapp可以一次开发多端运行，运行端不同，呈现的结果会存在差异。
而通常我们都会采取最安全的方案012021-08-01 -
Sunday
2021-08-01
首先我们需要先明确一下概念。 HBuilder 是一个编辑器，只提供编辑代码的功能。咱们使用的框架，叫做 uni-app。
而针对于问题，说白了其实就是 scoped 的作用，以及 scoped 区别于唯一的container类的地方。
那么首先，先来说一下 scoped 的作用：
当
<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素这是官网给出的答案（https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F） ， 也就是说使用
scoped属性时，样式不会渗透到子组件中。可以参考一下代码和图示
渲染结果
接下来是第二个问题：scoped 区别于唯一的container类的地方。
之前说过 唯一的container类 可以解决Scoped的一部分功能，也就是 不让样式渗出到 类名之外，但是它无法解决渗透到子组件的问题。
也就是说：当你在该组件下使用其他子组件时，你依然可以在该组件中修改子组件的样式。
具体可参考一下代码：
以下是渲染结果：
00 -
Sunday
2021-08-01
唯一的类名可以解决Scoped的一部分功能，但是当你的组件中使用其他组件的时候，是没有办法阻止样式渗透的
012021-08-01
相似问题