样式表

样式表不仅用于美化页面，也常作为组件功能的重要补充。一个良好的样式体系，不仅能提升用户体验，还能增强组件的表达力和复用性。在组件化开发中，传统的全局样式往往容易引发冲突和维护困难，而作用域机制的引入有效解决了这些问题。通过将样式限定在组件内部，开发者可以放心地定义类名和样式规则，无需担心影响到其他组件或页面元素。这种方式既保留了 CSS 的灵活性，又带来了更强的可控性和可维护性，是构建现代前端应用时不可或缺的一部分。

样式作用域

组件模板中内容在渲染时都会被添加一个作用域属性，例如：

<div>...</div>

会被渲染为类似这样的 HTML 片段：

<div qk-dbb1016b>...</div>

为了避免组件中的样式污染全局或其他组件，嵌入样式也会被添加一个作用域属性，例如：

<lang-css>
    div {
        color: red;
    }
</lang-css>

会被转换为：

div[qk-dbb1016b] {
    color: red;
}

作用域属性位置

通常情况下作用域属性会被添加到最后一个选择器后面：

div p[qk-dbb1016b] {
}
.container .box[qk-dbb1016b] {
}

但我们可以通过 qk-scope 属性选择器手动调整作用域属性添加的位置，例如：

div[qk-scope] p {
}
[qk-scope] .container .box {
}

会被转换为：

div[qk-dbb1016b] p {
}
[qk-dbb1016b] .container .box {
}

在github上编辑此页面