关于使⽤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哦）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。