①浏览器不支持 style 的 scope 属性，实现 CSS 作用域的方法是设置了 scoped 属性的 style 元素内的 CSS 选择器添加随机的属性选择器，然后模块内模板 HTML 也都增加同样名称的属性名称，于是就能匹配上了；
②如果页面中的 DOM 元素并非现成的，而是动态生成的，这个时候框架就无法添加随机属性，这种场景多出现在第三方组件，或者需要直接面向 DOM 处理的开发场景；
③在日常开发中，动态插入的 HTML 或者绕开框架进行的的 1v1 DOM 操作，普通的做法是把这些 CSS 代码写在全局的 CSS 上下文中或者 style 元素不设置 scope 属性；
④可以试试使用:is () 或:where () 伪类；
⑤:is () 伪类可以看成是一种 CSS 书写语法糖，可以简化复杂且重复选择器的书写，而:where () 伪类和:is () 伪类的语法、作用一模一样，区别在于选择器的优先级上；
⑥:where () 伪类的优先级是 0，无论其参数内的选择器优先级多高，是整个 CSS 世界中为数不多的可以降低选择器优先级的特性；
⑦:is () 伪类的优先级是由括号内选择器的优先级决定的，从这一点来看，:where () 伪类的作用可能还更大一点；
⑧在 Vue 等框架中使用:is () 伪类，选择器就不会再增加随机属性选择器，把需要重置的类名选择器使用:is () 包裹下，成功重置了第三方组件的样式；
⑨:is () 伪类正式支持是 Chrome88 开始的，也就是 21 年 1 月份，到现在已经快 2 年了，那些对兼容性要求不高的项目可以放心大胆使用，如果非要兼容陈旧浏览器，可以使用 :-webkit-any () 伪类兼容下，除了选择器的优先级不一样外（:any () 伪类的优先级恒定为类选择器优先级，忽略里面的参数），其他功效是一样的；
（参考：www.zhangxinxu.com/wordpress/2…
