目前Ionic4.x开始采用css shadow样式来进行样式的修改,这是一种新的css扩展,主要是基于Shadow DOM. 关于Shadow DOM简单来说就是对于DOM和CSS进行一种封装,使其与主文档的DOM保持分离
例如,我们在使用Ionic4.x的segment时,他的ion-segment-button会自动生成Shadow DOM
我们可以看到在ion-segment-button下面会有shadow-root,这就是shadow DOM,一般在这里设置的样式我们是无法直接通过css来进行修改的
在这里如果我们进行样式修改
.button-native {
min-width: 50px
}
这样进行样式修改是行不通的,因为shadow DOM会将一开始定义的css样式进行封装,当然如果他的shodow DOM里没有设置相关的样式,那么我们可以通过这个方法进行样式的添加。那么如果他在Shadow DOM里定义了样式,我们该怎么去修改呢,在这里我们就可以通过他标签里定义的part的了。
在这里我们可以看到他有一个part属性,这个属性就可以让我们进行相关的样式修改
ion-segment-button::part(native) {
min-width: 6rem;
}
通过part来进行样式的修改就可以修改shadow DOM里的样式了
我们可以看到通过part我们就成功将min-width进行修改了。(注意:min-width属性只适用于inline-block哦)