在 Ionic `ion-item` 中编辑阴影 DOM

Question

我实现了一个table，它很宽（比屏幕宽很多），用户可以水平滚动。

在最左边，是一个 task-row 组件，它有一个带有“粘性”的元素 header (.task-row_main class)，它不水平滚动时 t 移动，使用 css 位置：粘性。

.task-row_main {
    display: flex;
    align-items: center;
    max-width: 230px;
    flex-shrink: 1;
    flex-grow: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 1px;
}

当我将 task-row 组件添加到 ion-item 时，粘性 header 中断。水平滚动会导致粘性 header 滚出屏幕。

<ion-item>
    <task-row>
    </task-row>
</ion-item>

发生这种情况的原因是阴影 DOM 样式：

当我查看它时，我注意到它为什么不起作用，因为 input-wrapper 上的 overflow: hidden:

.input-wrapper{
    overflow:hidden;
}

如何覆盖 input-wrapper 的 overflow 属性以将其设置为 visible？

我试过创建指令并覆盖 css，但没有成功：

指令：

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appShadowCss]'
})
export class ShadowCssDirective implements OnChanges {
  @Input() shadowCustomCss: string;

  ngOnChanges(): void {
    const shadow = this.el.nativeElement.shadowRoot || this.el.nativeElement.attachShadow({ mode: 'open' });
    if (shadow) {
      let innerHTML = '';
      innerHTML += '<style>';
      innerHTML += this.shadowCustomCss;
      innerHTML += '</style>';
      shadow.innerHTML += innerHTML;
    }
  }

  constructor(private el: ElementRef) {

  }
}

html:

 `<ion-item appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;}'>`

如何在 ion-item 中编辑此阴影 DOM 以设置 overflow: visible？

Answer 1

原来还有更多 overflow:hidden 而不是 input-wrapper{overflow:visible}。

必须这样做：

<ion-item #ionItem appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;} .item-native{overflow:visible;} .item-inner{overflow:visible;}'>

在 Ionic `ion-item` 中编辑阴影 DOM

Editing shadow DOM in Ionic `ion-item`

css

overflow

ionic-framework