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

【问题标题】：Editing shadow DOM in Ionic `ion-item`在 Ionic `ion-item` 中编辑阴影 DOM
【发布时间】：2019-11-09 16:54:09
【问题描述】：

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

在最左边，是一个任务行组件，它有一个带有“粘性”标题的元素（.task-row_main 类），在水平滚动时不会移动，使用 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;
}

当我将我的任务行组件添加到 ion-item 时，粘性标题会中断。水平滚动会导致粘性标题滚动到屏幕外。

<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 中编辑这个shadow DOM 来设置overflow: visible？

【问题讨论】：

你有没有搞怪呢？
@cup_of 是的，但它无效。

标签： css ionic-framework overflow

【解决方案1】：

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

必须这样做：

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

【讨论】：