scoped实现原理

scoped实现原理

• 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx
• 给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

样式穿透原理：

• scoped后选择器最后默认会加上当前组件的一个标识，比如[data-v-49729759]
• 用了样式穿透后，在deep之后的选择器最后就不会加上标识