用 ViewEncapsulation.ShadowDom 元素包裹的元素内 cdkScrollable 和 cdkDropList 的问题

如何解决用 ViewEncapsulation.ShadowDom 元素包裹的元素内 cdkScrollable 和 cdkDropList 的问题

我在使用带有 encapsulation: ViewEncapsulation.ShadowDom 元素的元素包裹的 cdkScrollable 容器中使用 cdk 拖放功能时遇到问题。

当拖动元素导致列表滚动时，滚动偏移量不会被添加到拖动元素定位中。

wrapper.component.html

@Component({
  selector: 'wrapper',...
  encapsulation: ViewEncapsulation.ShadowDom,})
export class WrapperComponent {}

app.component.html

<wrapper
    <div class="container" cdkScrollable>
        <div class="list" cdkDropList>
            <div *ngFor="let question of questions" class="question__container" cdkDrag>
                <div class="question__content">{{ question?.Name }}</div>
            </div>
        </div>
    </div>
</wrapper>

app.component.css

.container {
  height: 500px;
  overflow-y: auto;
}

.question {
  &__container {
    padding: 10px;
    border: 1px solid black;
  }
}

现在，当我注释掉 <wrapper></wrapper> 时，一切都按预期进行。拖动 cdkDrag 时滚动效果很好。

有什么办法可以解决这个问题吗？正如我在 Scrolldispatcher 中看到的那样，它注入 DOCUMENT 并将其用作滚动计算的根。这可能是问题的根源吗？