- Vue中style的scoped原理：Vue在编译过程中会给生成的CSS选择器添加一个独特的属性选择器，例如
data-v-hash，来保证只有对应Vue组件的DOM会应用这些样式。这样做可以保证样式只影响当前组件的DOM，不会泄漏到其他组件中，这就是所谓的作用域CSS或者CSS模块。 - deep样式穿透原理：在Vue中，使用
>>>、/deep/或者::v-deep可以穿透组件边界，应用深层选择器。这些特殊的选择器会被Vue预处理器转换为合适的深层选择器，使得样式可以穿透多层嵌套的组件。 - 插槽选择器:slotted：使用
:slotted选择器可以选择插槽分发的内容。例如，如果你在组件中使用了<slot>元素，你可以用:slotted(.button)选择所有通过这个插槽分发的具有.button类的元素。 - CSS Module：CSS Module是一种特殊的CSS文件，其中类名都是局部作用域的。这样可以避免类名冲突。在Vue中，你可以通过
module选项在<style>标签中启用CSS Module。 - 伪元素::g：伪元素
::g是CSS Grid布局中的一个新特性，它可以选择网格线。例如，grid-row: 1 / span 2;可以选择第一行的前两个网格项。
以下是这些概念的简单示例代码：
<template>
<div>
<h1>Vue Style Scoping Example</h1>
<child-component>
<button class="button">Button in Child</button>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
<style scoped>
h1 {
color: blue;
}
:deep(.button) {
color: red;
}
:slotted(.button) {
background-color: green;
}
</style>ChildComponent.vue:
<template>
<div>
<slot></slot>
</div>
</template>
<style module>
.button {
padding: 10px;
border: 1px solid black;
}
</style>在这个例子中，h1元素由于scoped属性会自动应用蓝色文本样式，子组件中的按钮通过:deep选择器设置为红色文本，同时插槽分发的具有.button类的按钮背景会是绿色。CSS Module中的.button类会有独特的类名，避免了全局样式冲突。