关于使用CSS Shadow进行样式修改

目前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哦）