關(guān)于css樣式隔離的一個疑問，在vue中的單文件組件中會幫我們在不同的節(jié)點上添加一個[data-dsa-sdw34]大概這樣的標簽來控制樣式范圍，但請看如下代碼，dialog中的視圖節(jié)點應(yīng)該也是會被影響的
假如dialog的視圖層級節(jié)點這樣：

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

這樣使用dialog組件：

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

原本dialog組件內(nèi)的樣式不應(yīng)該被外部div[data-addr]所影響，但按這樣的話，這個div內(nèi)部的所有文字大小都會是20px（除非dialog內(nèi)部有再設(shè)置字體大小外），這很無奈吧。但如果使用內(nèi)聯(lián)樣式，卻沒辦法使用@keyframes、或者-webkit-、-ie-等這樣的前綴。請問這要怎么破，大家是如何做css樣式范圍控制的？