如何理解Scoped CSS

样式冲突解决方案
 
Scoped CSS与CSS Module是两大解决CSS中不存在模块化缺陷的有效手段,其中CSS Module通过将class名称做编码转换的方式来保证唯一性,从而避免样式冲突,比如
 
 <h1 className={style.title}>
 
     Hello World
 
 </h1>
 
被转换为
 
 <h1 class=”_3zyde4l1yATCOkgn-DBWEL”>
 
     Hello World
 
 </h1>
 
而相应的
 
 .title {
 
   color: red;
 
 }
 
被转换为
 
 ._3zyde4l1yATCOkgn-DBWEL {
 
   color: red;
 
 }
 
由于转换过后发生同名的可能性实在是太小了,这样就保证了在开发阶段可以放心的使用各种样式名称,即便发生同名也不会造成冲突。
 
而Scoped CSS使用的是另一种解决方案 —— 在HTML标签上做文章,比如
 
 <style scoped>
 
 .example {
 
   color: red;
 
 }
 
 </style>
 
 ​
 
 <template>
 
   <div class=”example”>hi</div>
 
 </template>
 
被转换为
 
 <style>
 
 .example[data-v-f3f3eg9] {
 
   color: red;
 
 }
 
 </style>
 
 ​
 
 <template>
 
   <div class=”example” data-v-f3f3eg9>hi</div>
 
 </template>
 
这样,example的样式被限定在具有data-v-f3f3eg9属性的HTML标签上,也间接保证了唯一性,避免冲突。
 
本来到此好好的,不过官方文档接下来的一段话反而让我迷惑了
 
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
 
看来还是得要做实验
 
准备
 
准备三个组件
 
Level1.vue
 
Level2.vue
 
Level3.vue
 
其中Level1.vue包含了Level2.vue,Level2.vue包含了Level3.vue
 
接着加上一些方便于辨析的样式,最终效果如下
 
样式继承
 
在三个组件中加上文本,以Level1.vue组件为例

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64070.shtml

张贴在3