如何为元素内部的Shadow DOM应用自定义CSS？（Ionic 4场景）

我之前也碰到过一模一样的问题——Shadow DOM的封闭特性会把组件内部的元素和外部CSS隔离开，普通选择器根本碰不到item-native、item-inner这些嵌套在#shadow-root里的元素。不过Ionic 4已经支持CSS Shadow Parts这个标准方案，专门用来解决这类样式穿透问题，下面给你具体的实现步骤：

1. 了解Ionic组件暴露的Shadow Parts #

Ionic的每个组件都会把内部可自定义的元素通过part属性暴露出来，对于ion-item来说：

• item-native对应的part名称是native
• item-inner对应的part名称是inner

你可以打开浏览器开发者工具，查看ion-item的Shadow Root内容，就能看到这些元素上的part属性，确认具体名称。

2. 编写穿透Shadow DOM的CSS #

针对你带itm-pad类的ion-item，直接用::part()伪元素来选中内部元素：

/* 自定义item-native的样式 */
.itm-pad::part(native) {
  padding: 0; /* 覆盖默认内边距 */
  background-color: #f5f5f5; /* 自定义背景色 */
  border-radius: 8px; /* 圆角效果 */
}

/* 自定义item-inner的样式 */
.itm-pad::part(inner) {
  justify-content: space-around; /* 调整内部元素的布局 */
  align-items: center;
}

3. 注意事项 #

• 别用已经被废弃的::ng-deep或者/deep/，这些是非标准写法，未来会被移除，::part()是W3C的标准方案，更可靠。
• 如果需要修改其他Shadow Root内的元素，都可以用这个思路：先查组件暴露的part名称，再用::part()来写样式。

这样写之后，你定义的样式就能正常作用到#shadow-root里的item-native和item-inner了！

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