/deep/使用的坑

Posted 2023-04-12

参考技术A 一、问题：
公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效，chrome89 /deep/选择器失效，导致样式错乱，覆盖的样式失效
二、覆盖element-ui 样式的方法

针对chrome89以下版本，6种方式均生效，chrome89 以后，第3种方式样式覆盖失效。
原因是：chrome63 已经删除 ::shadow 和 /deep/，但89版本之前还可以使用，因为在chrome89版本中才彻底移除Shadow DOM V0，导致/deep/失效 。
三、写在公共样式中的/deep/，在main.js中引入和在.vue文件中scoped内使用/deep/有什么区别
1、公共样式中使用/deep/，main.js中引入，无任何解析，直接输出/deep/，也就是chrome自身去解析/deep/，chrome的/deep/是对shadow-dom的深度穿透
2、.vue文件scoped中使用/deep/，选择器会被加上hash值，如下图：

Vue中使用/deep/bug

【中文标题】Vue中使用/deep/bug

【英文标题】：Use / deep / bug in Vue

【发布时间】：2019-09-15 15:10:56

【问题描述】：

我在vue-lic3中使用了SCSS，但是有一个奇怪的bug，使用/deep/会报错，我不想看到。

代码运行环境 vue-cli3 + vant + scss

css

/deep/ .van-tabs__content.van-tabs__content--animated,
  .van-tabs--line,
  .van-pull-refresh,
  .van-pull-refresh__track 
    height: 100%;
  

vue.config.js

css: 
    loaderOptions: 
      sass: 
        data: `@import "~@/style/module.scss";`
      
    
  ,

错误

Failed to compile with 1 errors                                                                                                                                                                           14:14:46
 error  in ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  .van-tabs--line,
 ^
      Expected selector.
    ╷
274 │   /deep/ .van-tabs__content.van-tabs__content--animated,
    │   ^
    ╵
  stdin 274:3  root stylesheet
      in F:\web\project-a\src\views\RankingList.vue (line 274, column 3)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/RankingList.vue?vue&type=style&index=0&lang=scss& 4:14-444 14:3-18:5 15:22-452
 @ ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&
 @ ./src/views/RankingList.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.15:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

【问题讨论】：

似乎用vue应该可以工作>>>或::v-deepdocs

【参考方案1】：

对我来说 /deep/ 不会编译。

我用::v-deep：

.scoped-element 
    color:white;

    ::v-deep .child-of-scoped-element 
        color: black;
    

或者

.scoped-element::v-deep.child-of-scoped-element 
    color: black;

【参考方案2】：

在我的项目中，我使用下一个语法.class__name /deep/ .class_i_want_to_change ，它工作正常。你试过了吗？

【讨论】：

这个css代码是所有css文件的开始吗？因为我认为，您不能只在*** lvl 上使用 /deep/。另外，您是否尝试过::v-deep，就像在 Vue 中一样 doc