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

Question

我在将 cdk 拖放功能与 cdkScrollable 容器一起使用时遇到问题，该容器包含在带有元素的encapsulation: ViewEncapsulation.ShadowDom元素中。

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

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并将其用作滚动计算的根。这可能是问题的根源吗？