如何让<ion-toolbar>内的shadow root元素匹配其高度？

问题场景 #

我创建了一个包含<ion-toolbar style="height: 100%">的自定义组件，将其引入到设置了style="height: 8%"的<ion-header>中后，发现<ion-toolbar>本身高度能匹配<ion-header>，但它Shadow Root里的div.toolbar-container元素高度没有占满父容器。手动在调试工具中给这个容器设置height:100%可以解决问题，但不知道怎么通过代码实现。

解决方案 #

Ionic的内置组件会给Shadow DOM中的关键元素暴露Shadow Part，你可以通过::part()选择器直接定位到toolbar-container并设置样式：

在自定义组件的CSS文件中添加以下样式：

ion-toolbar::part(container) {
  height: 100%;
}

如果需要限定样式仅作用于当前组件内的toolbar，可以加上:host选择器进行隔离：

:host ion-toolbar::part(container) {
  height: 100%;
}

原理说明 #

Shadow DOM的样式隔离机制导致普通CSS选择器无法穿透到组件内部，但Ionic为了方便开发者自定义样式，会给内置组件的核心元素添加part属性。对于<ion-toolbar>来说，其内部的容器元素带有part="container"，因此可以通过::part(container)选择器精准修改它的样式。

内容的提问来源于stack exchange，提问作者Donald Groezinger