样式隔离
1. 全局样式
App.uvue中定义的全局样式是否会影响页面元素
使用全局class "global-text"：
这段文字应用了全局样式，文字应为：蓝色
使用全局class "global-box"：
这是应用了全局box样式的容器，背景色应为：蓝色
2. 自定义组件hover-class透传
单根节点为view的自定义组件，可以直接透传hover-class相关属性
抬起 1000 ms 后背景恢复
3. 单根节点组件
组件为单根节点时，外部使用的class和style会覆盖在组件的根节点上
默认样式的组件：
预期：组件内部有内联style的元素（黄色背景，3px边框），外部class无法覆盖内联style
外部添加class覆盖（绿色）：
外部添加style覆盖（绿色）：
外部class和style同时覆盖（绿色+border-width为5px）：
4. externalClasses配置
通过externalClasses暴露特定class（类似微信小程序），允许外部精确控制组件内部样式
默认样式（橙色）：
通过child-class自定义样式（蓝色）：
全局样式使用!important覆盖组件样式：
预期：全局样式中的!important可以覆盖组件内部样式
4.5. external-style配置
通过external-style暴露style属性，允许外部通过style字符串控制组件内部样式（不受样式隔离策略影响）
默认样式（橙色）：
通过box-style自定义外层样式（蓝色）：
通过inner-box-style自定义内层样式（绿色）：
5. 多根节点组件
多根节点继承 $attrs.style 和 $attrs.class，允许外部精确控制组件内部样式
默认样式：
通过$attrs.class自定义组件内部样式（紫色）：
通过$attrs.style自定义组件内部样式（蓝色）：
6. 组件的根节点为二级组件时 样式传递
页面使用组件level，组件level使用二级组件level-child
默认样式：
外部添加class覆盖（蓝色）：
7. 父组件不影响子组件
默认策略下，父组件的样式不会影响子组件（子组件样式隔离）
父组件包含子组件：
预期：父组件有橙色背景，子组件有蓝色背景。父组件中定义的.child-box样式（黄色）不会影响子组件，子组件保持自己的蓝色背景
8. styleIsolation配置
isolated、app、app-and-page三种样式隔离模式的优先级关系
8.1 isolated模式 - 全隔离
只受组件自身样式影响（除externalClasses、组件根节点、v-deep以外），不受全局样式和页面样式影响
预期：.global-box不会应用全局样式（蓝色），.page-box不会应用页面样式（绿色），只显示组件自身样式（紫色）
8.2 app模式 - 受全局样式影响
优先级：全局样式 < 自身样式
预期：.global-box会应用全局样式（蓝色），.page-box不会应用页面样式（绿色），组件自身样式优先级最高（紫色）
8.3 app-and-page模式 - 受全局和页面样式影响
优先级：全局样式 < 组件自身样式 < 页面样式
预期：.global-box会应用全局样式（蓝色），.page-box会应用页面样式（绿色）优先级最高，组件自身样式（紫色）