关于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样式范围控制的？