關於vue-loader無法為動態添加的元素添加scoped style的解決方案？

vue毋庸置疑是一款傑作，其中任何一部分內容都十分精妙，vue-loader實現的scoped特性也是一個雖然細微但是無比精妙的管理style作用域解決方案。

然而，vue-loader對於未使用vue提供的API創建的元素，不會為其添加hash attribute，那麼在作用域內都無法選中這些元素。

而未使用vue API創建元素的庫不在少數，這不僅包括jquery，甚至包括element-ui。這一問題github上有人提過issue，不過未能解決就關閉了。

Scoped CSS Doesn#x27;t work on dynamic content · Issue #559 · vuejs/vue-loader

有關這一問題，我有一個想法，是否可以將hash attribute僅作為父選擇器，將上例中的

.el-tabs__item[hash]


變為

[hash] .el-tabs__item


這樣做的優勢是：

1）可以不用對作用域內的每個元素都添加一個hash attribute；

2）可以選擇動態添加的元素；

缺點是：

1）無法選擇最外層的容器；

如果這一方案可行，我相信只需要修改vue-loader/lib/style-compiler/plugins/scope-id.js就可以了。

這是預期行為。這其實是在模擬 Shadow DOM，盡量避免組件樣式被不小心覆蓋掉。因為如果你能選中內部的部件，就在一定程度上破壞了封裝性，依賴了組件的內部實現。（如果 Element 下個版本輸出了另一個 class，你的樣式就可能會出問題。）

當然，如果在受控的環境下，如果這個 class 就是「介面」的一部分（瀏覽器的很多原生 DOM 元素內部也是 Shadow DOM，開的介面是偽元素），開放外部修改的介面也是有存在的價值的。可能 Vue 以後會想辦法支持用 &>&>&> 或者偽元素來讓樣式定義穿透組件邊界吧。

---

如果按你的想法：子組件會全部套用父組件的樣式。

而現在的做法：只有子組件的根結點會套用父組件的樣式。