关于使⽤CSSShadow进⾏样式修改
⽬前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的了。
box shadow怎么设置在这⾥我们可以看到他有⼀个part属性,这个属性就可以让我们进⾏相关的样式修改
ion-segment-button::part(native){
min-width: 6rem;
}
通过part来进⾏样式的修改就可以修改shadow DOM⾥的样式了
我们可以看到通过part我们就成功将min-width进⾏修改了。(注意:min-width属性只适⽤于inline-block哦)