參考文檔

原理

• 給元素添加唯一屬性（同一組件中所有dom添加的屬性值相同），然后通過屬性選擇器獲取該元素

通過 PostCSS 實現以下轉換

<style scoped> .example {color: red; } </style><template><div class="example">hi</div> </template> 復制代碼

轉換結果：

<style> .example[data-v-f3f3eg9] {color: red; } </style><template><div class="example" data-v-f3f3eg9>hi</div> </template> 復制代碼

不足

• scoped下無法修改組件外樣式（不利于處理第三方組件樣式）

彌補

同時使用 有作用域 和 無作用域 樣式

<style> /* 無作用域樣式 */ </style><style scoped> /* 有作用域樣式 */ </style> 復制代碼

使用 深度作用選擇器

<style scoped> .a >>> .b { /* ... */ } </style>編譯后.a[data-v-f3f3eg9] .b { /* ... */ } 復制代碼

• 有些預處理器無法正確解析 >>> ，可使用 /deep/ 操作符取而代之

替代

• 可通過 在外層dom添加唯一class 區分不同組件，模擬scoped用途

轉載于:https://juejin.im/post/5cc145ece51d45401f566d19

總結

以上是生活随笔為你收集整理的scoped原理、不足、弥补或替代的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。