Angular+Ionic 6中Shadow DOM内input-wrapper样式设置失败求助

在Angular+Ionic 6应用中，需要编写SCSS代码为DOM中#shadow-root内的.input-wrapper元素设置固定高度，但尝试以下两种写法均未生效：

第一种写法：

ion-item {
        &::part(native) {
          .item-inner {
            .input-wrapper {
              height: 30px;
            }
          }
        }
      }

第二种写法：

:host(ion-item)::ng-deep #shadow-root .input-wrapper { 
    height: 30px; 
}

错误原因 #

1. 第一种写法：::part(native)是Ionic组件暴露的可样式化部件，但item-inner和input-wrapper属于ion-item shadow DOM内部未对外暴露的元素，常规后代选择器无法穿透shadow DOM访问这些未暴露元素。
2. 第二种写法：#shadow-root不是合法的CSS选择器，CSS没有针对shadow root的直接选择语法，即使使用::ng-deep，搭配错误的选择器也无法定位到目标元素。

正确样式写法 #

直接使用::ng-deep穿透shadow DOM，结合正确的层级选择器定位目标元素：

::ng-deep ion-item .item-inner .input-wrapper {
  height: 30px;
}

如果需要限定样式作用域，避免污染全局样式，可结合:host使用：

:host ::ng-deep ion-item .item-inner .input-wrapper {
  height: 30px;
}

补充说明 #

Ionic 6组件的shadow DOM中，只有官方文档标注的part元素可通过::part()选择器样式化；若目标元素未暴露part，则需使用::ng-deep（注：Angular中::ng-deep已标记为deprecated，但当前版本仍可正常使用，也可考虑通过设置ViewEncapsulation.None替代，但需注意样式隔离问题）。

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