/deep/在chrome89+中出现样式混乱的问题

2024-05-14 15:05:33

问题描述

elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题

公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。

问题分析

Chrome 63将删除::shadow 和 /deep/

在Chrome63之后，你将无法使用shadow-piercing 选择器， ::shadow 和 /deep/ 来设计(style) shadow root里面的内容。

/deep/ 组合者(combinator)将会成为后代选择器。 x-foo /deep/ div 将会当成 x-foo div.
::shadow 伪元素(pseudo-element)将不会匹配任何元素。

删除::shadow 和 /deep/ 的原因

::shadow 和 /deep/ 已经在Chrome 45被弃用了。这是在2015年4月由Web组件聚会中的全部的出席者决定的。

目前，shadow-piercing选择器的问题是它违反了封装(encapsulation)以及在某些时候组件无法更改组件的内部实施。

CSS Shadow Parts的规范正在被推进为shadow piercing选择器的替代。 Shadow Parts 将会允许组件的开发者公开指定的元素。这将会保留封装(encapsulation) 并允许网页的开发者可以一次过设计(style)多个属性。

网页使用了::shadow and /deep/我应该要怎样呢

::shadow 和 /deep/ 选择器只会影响旧版的Shadow DOM v0组件。如果您已使用Shadow DOM v1，您不必为您的网页更改任何东西。

您可以使用Chrome Canary来确认您的网站不会因这更新而导致故障。如果你发现了问题，您可以尝试删除代码中所有的::shadow 和 /deep/。如果删除这些选择器对您来说太复杂，您可以尝试考虑用shady DOM polyfill来代替native shadow DOM。如果你的网页正在使用native shadow DOM v0，你才要需要做这个改变。

解决方法

直接在公共样式中去掉/deep/即可。另外在单独的vue文件中，使用/deep/是可以的，单个vue文件使用scoped。

备注

https://developers.google.cn/web/updates/2017/10/remove-shadow-piercing?hl=zh-cn#%E5%A6%82%E6%9E%9C%E6%88%91%E7%9A%84%E7%BD%91%E9%A1%B5%E4%BD%BF%E7%94%A8%E4%BA%86shadow_and_deep%E6%88%91%E5%BA%94%E8%AF%A5%E8%A6%81%E6%80%8E%E6%A0%B7%E5%91%A2

/deep/在chrome89+中出现样式混乱的问题相关推荐

idea module取得是parent的文件路径_React(或使用TS)中样式混乱解决方案 *.module.less...
使用.module.css / .module.less / .module.scss避免样式混乱先说写这一篇文章的出处,在之前feizhu-react这各项目中使用了基础的css样式,但是写到后来 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
Vue 中 scoped 样式穿透
vue引用了第三方组件,如elementUI,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染. 办法一: 使用::v-deep操作符( >>> ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
React中CSS样式
文章目录一.内联样式在内联样式中使用State 二.外部样式表三.CSS Module 使用方式一.内联样式在React中可以直接通过标签的style属性来为元素设置样式.style属性需要 ...
Github css加载失败，样式混乱解决办法
github被墙的解决办法 Github css加载失败,样式混乱解决办法打开cmd,输入 nslookup github.com 8.8.8.8 ,下面就会显示出github的服务器地址列表 ...
html中的样式写在什么位置,css样式放在哪里？
css(Cascading Style Sheets,层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式 ...

最新文章

热门文章