Ionic中如何用CSS选择shadow-parts内的.item-inner元素

你遇到的问题源于Shadow DOM的样式隔离机制：::part()选择器仅能直接选中标记了part属性的元素，无法穿透到它的后代元素（比如.item-inner），因此你写的ion-item::part(native) .item-inner不会生效。

以下是可行的解决方法：

方法1：利用组件内置CSS变量（优先推荐，适配Ionic组件） #

Ionic的ion-item组件通常提供了控制内边距的CSS变量，直接设置对应变量即可覆盖默认样式：

ion-item {
  --padding-end: 0px;
}

该变量会直接作用于.item-inner的内边距，无需穿透Shadow DOM。

方法2：通过JavaScript操作Shadow DOM #

若组件未提供合适的CSS变量，可通过JS直接访问Shadow DOM内部元素并设置样式：

// 获取目标ion-item元素
const ionItem = document.querySelector('ion-item');
// 访问其Shadow根节点
const shadowRoot = ionItem.shadowRoot;
// 选中.item-inner并设置样式
const itemInner = shadowRoot.querySelector('.item-inner');
if (itemInner) {
  itemInner.style.paddingInlineEnd = '0px';
}

若页面存在多个ion-item，可使用querySelectorAll遍历处理。

方法3：检查组件是否为.item-inner暴露part属性 #

若组件后续版本或配置中，给.item-inner添加了part="inner"属性，即可直接用::part()选中它：

ion-item::part(inner) {
  padding-inline-end: 0px;
}

但根据你提供的Shadow DOM结构，当前.item-inner未设置part属性，此方法暂时不可用。

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