單文件組件樣式特性

style scoped
當(dāng)??標(biāo)簽帶有 scoped attribute 的時(shí)候,它的 CSS 只會(huì)應(yīng)用到當(dāng)前組件的元素上。這類似于 Shadow DOM 中的樣式封裝。它帶有一些注意事項(xiàng),不過(guò)好處是不需要任何的 polyfill。它是通過(guò) PostCSS 轉(zhuǎn)換以下內(nèi)容來(lái)實(shí)現(xiàn)的:
<style scoped>.example {color: red;}style><template><div class="example">hidiv>template>
轉(zhuǎn)換為:
<style>.example[data-v-f3f3eg9] {color: red;}style><template><div class="example" data-v-f3f3eg9>hidiv>template>
子組件的根元素
在帶有 scoped 的時(shí)候,父組件的樣式將不會(huì)泄露到子組件當(dāng)中。不過(guò),子組件的根節(jié)點(diǎn)會(huì)同時(shí)被父組件的作用域樣式和子組件的作用域樣式影響。這是有意為之的,這樣父組件就可以設(shè)置子組件根節(jié)點(diǎn)的樣式,以達(dá)到調(diào)整布局的目的。
深度選擇器
處于 scoped 樣式中的選擇器如果想要做更“深度”的選擇,也即:影響到子組件,可以使用?:deep()?這個(gè)偽類:
<style scoped>.a :deep(.b) {/* ... */}style>
上面的代碼會(huì)被編譯成:
.a[data-v-f3f3eg9] .b {/* ... */}
插槽選擇器
默認(rèn)情況下,作用域樣式不會(huì)影響到??渲染出來(lái)的內(nèi)容,因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來(lái)的。使用?:slotted?偽類以確切地將插槽內(nèi)容作為選擇器的目標(biāo):
<style scoped>:slotted(div) {color: red;}style>
全局選擇器
如果想讓其中一個(gè)樣式規(guī)則應(yīng)用到全局,比起另外創(chuàng)建一個(gè)?,可以使用?:global?偽類來(lái)實(shí)現(xiàn) (看下面的代碼):
<style scoped>:global(.red) {color: red;}style>
混合使用局部與全局樣式
你也可以在同一個(gè)組件中同時(shí)包含作用域樣式和非作用域樣式:
<style>/* global styles */style>
<style scoped>/* local styles *style>
style module
?標(biāo)簽會(huì)被編譯為 CSS Modules 并且將生成的 CSS 類作為?$style?對(duì)象的鍵暴露給組件:
<template><p :class="$style.red">This should be redp>template><style module>.red {color: red;}style>
對(duì)生成的類做 hash 計(jì)算以避免沖突,實(shí)現(xiàn)了和 scope CSS 一樣將 CSS 僅作用于當(dāng)前組件的效果。
自定義注入名稱
你可以通過(guò)給?module?attribute 一個(gè)值來(lái)自定義注入的類對(duì)象的 property 鍵:
<template><p :class="classes.red">redp>template><style module="classes">.red {color: red;}style>
與組合式 API 一同使用
注入的類可以通過(guò)?useCssModule?API 在?setup()?和?
