开发者工具预览和真机调试,在设置styleIsolation属性时效果不同
代码如下: // index/index.wxss
.stopwatch {
font-family: monospace;
font-size: 32px;
text-align: center;
display: block;
margin: 60rpx;
color: red;
}
.blue{
color: blue;
}
// index.wxml
<view>
<stopwatch id="stopwatch" class="stopwatch" />
<button class="btn blue" wx:if="{{!started}}" bindtap="start">开始计时</button>
<button class="btn blue" wx:if="{{started}}" bindtap="stop">停止计时</button>
</view>
// 引用的组件stopwatch
// components/stopwatch.wxml
<view>
{{text}}
<text class="blue">
....
</text>
</view>
// components/stopwatch.json
"styleIsolation": "apply-shared",
根据文档所述,页面引用组件时,如果组件的styleIsolation设置为'apply-shared'时。stopwatch组件应受到index Page的影响,组件中的 。。。 省略号应该是蓝色。 但是开发者工具预览中,省略号是红色,效果如下: [图片] 然而当使用真机调试的时候,却和文档描述的相符 [图片]