vue范围样式是不是无法做到完全隔离

Question

关于css样式隔离的一个疑问，在vue中的单文件组件中会帮我们在不同的节点上添加一个[data-dsa-sdw34]大概这样的标签来控制样式范围，但请看如下代码，dialog中的视图节点应该也是会被影响的
假如dialog的视图层级节点这样：

<div>
    <span>我是dialog的文本</span>
</div>

这样使用dialog组件：

<style>
    div[data-addr-234w4] {
        font-size: 20px;
    }
</style>
<div data-addr-234w4>
    <!-- 假如dialog是一个组件 -->
    <dialog></dialog>
</div>

原本dialog组件内的样式不应该被外部div[data-addr]所影响，但按这样的话，这个div内部的所有文字大小都会是20px（除非dialog内部有再设置字体大小外），这很无奈吧。但如果使用内联样式，却没办法使用@keyframes、或者-webkit-、-ie-等这样的前缀。请问这要怎么破，大家是如何做css样式范围控制的？

Answer 1

和上面一个兄弟说的一样样式是会被继承的，子元素的font-size会继承自父元素，这是css的默认继承和单文件组件没有关系。style的scope属性也只能给单文件组件加上data-**的属性来控制不污染父元素外面的元素。如果想要子元素不被父组件影响的话只能也给子组件加上样式了

Answer 2

<style scoped> 呢？

Answer 3

你说的问题是font-size的继承的问题，和你问的有什么关系？

Answer 4

这个scoped 属性帮你把css范围控制都做了 你为何还要这么改变css呢？

Answer 5

其实是会被影响的，在<dialog>的父节点定义的css在渲染出来后是一定会影响<dialog>组件的视图内容的，因为它们存在于子节点中

Answer 6

[data-addr-234w4] 加了scoped渲染出来的css才会长这样把，你这手动写成这样

Answer 7

data-xxxxx 之所以是自动生成，就是防止重复嘛。你这还手动给搞重复。
真正的极客，是破解自己的代码~~