Я реализовал таблицу, которая очень широка (намного шире, чем экран), и пользователь может прокручивать ее горизонтально.
В крайнем левом углу находится компонент строки задачи, в котором есть элемент с«липкий» заголовок (класс .task-row_main), который не перемещается при горизонтальной прокрутке с использованием позиции css: sticky.
.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,липкий заголовок ломается.Прокрутка по горизонтали приводит к тому, что липкий заголовок прокручивается за пределы экрана.
Причина, по которой это происходит, из-за стиля теневого дома: 
КогдаЯ смотрю на это, я замечаю, почему он не работает, из-за overflow: hidden на input-wrapper:
.input-wrapper{
overflow:hidden;
}
Как мне переопределить свойство overflow input-wrapper, чтобы установить его на 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, чтобы установить overflow: visible?