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> 呢？