如果这个 Component 构造器用于构造页面 ，则默认值为 shared ，且还有以下几个额外的样式隔离选项可用：
- page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
- page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面；
- page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。
从小程序基础库版本 2.10.1 开始，也可以在页面或自定义组件的 json 文件中配置 styleIsolation （这样就不需在 js 文件的 options 中再配置）。例如：
{
"styleIsolation": "isolated"
}
此外，小程序基础库版本 2.2.3 以上支持 addGlobalClass 选项，即在 Component 的 options 中设置 addGlobalClass: true 。 这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
代码示例：
/* 组件 custom-component.js */
Component({
options: {
addGlobalClass: true,
}
})
<!-- 组件 custom-component.wxml -->
<text class="red-text">这段文本的颜色由 `app.wxss` 和页面 `wxss` 中的样式定义来决定</text>
/* app.wxss */
.red-text {
color: red;
}
外部样式类
基础库 1.9.90 开始支持，低版本需做兼容处理。有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。
这个特性可以用于实现类似于 view 组件的 hover-class 属性：页面可以提供一个样式类，赋予 view 的 hover-class ，这个样式类本身写在页面中而非 view 组件的实现中。
注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。
代码示例：
/* 组件 custom-component.js */
Component({
externalClasses: ['my-class']
})
<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>
这样，组件的使用者可以指定这个样式类对应的 class ，就像使用普通属性一样。在 2.7.1 之后，可以指定多个对应的 class 。
代码示例：
<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />
<!-- 以下写法需要基础库版本 2.7.1 以上 -->
<custom-component my-class="red-text large-text" />
.red-text {
color: red;
}
.large-text {
font-size: 1.5em;
}
引用页面或父组件的样式
基础库 2.9.2 开始支持，低版本需做兼容处理。即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。
例如，如果在页面 wxss 中定义了：
.blue-text {
color: blue;
}
在这个组件中可以使用 ~ 来引用这个类的样式：
<view class="~blue-text"> 这段文本是蓝色的 </view>
如果在一个组件的父组件 wxss 中定义了：
.red-text {
color: red;
}
在这个组件中可以使用 ^ 来引用这个类的样式：
<view class="^red-text"> 这段文本是红色的 </view>
也可以连续使用多个 ^ 来引用祖先组件中的样式。
注意：如果组件是比较独立、通用的组件，请优先使用外部样式类的方式，而非直接引用父组件或页面的样式。
虚拟化组件节点
基础库 2.11.2 开始支持，低版本需做兼容处理。默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。
<!-- 页面的 WXML -->
<view style="display: flex">
<!-- 默认情况下，这是一个普通的节点 -->
<custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component>
</view>
但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。
这种情况下，可以将这个自定义组件设置为“虚拟的”：
Component({
options: {
virtualHost: true
},
properties: {
style: { // 定义 style 属性可以拿到 style 属性上设置的值
type: String,
}
},
externalClass: ['class'], // 可以将 class 设为 externalClass
})
这样，可以将 flex 放入自定义组件内：
<!-- 页面的 WXML -->
<view style="display: flex">
<!-- 如果设置了 virtualHost ，节点上的样式将失效 -->
<custom-component style="color: blue">不是蓝色的</custom-component>
</view>
<!-- custom-component.wxml -->
<view style="flex: 1">
满宽的
<slot></slot>
</view>
需要注意的是，自定义组件节点上的 class style 和动画将不再生效，但仍可以：
- 将 style 定义成 properties 属性来获取 style 上设置的值；
- 将 class 定义成 externalClasses 外部样式类使得自定义组件 wxml 可以使用 class 值。
标签：微信小程序
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
