可以在web组件中使用vis-timeline吗？

Question

可以在web组件中使用vis-timeline吗？我正在尝试设置一个带有时间线的angular web组件，并且web组件正在正确地渲染时间线之外的部分，但是时间线根本没有被渲染。这有可能实现吗？如果我从ViewEncapsulation.ShadowDom更改App.component.ts的封装，它会工作得很好，因为它不再位于影子根目录中。

组件：

export class TimelineComponent implements OnInit {

  @ViewChild('visualization', { static: true }) timelineContainer: ElementRef;

  async ngOnInit() {
    this.options = this.getOptions();
    this.groups = this.getTimelineGroups();
    this.items = this.getItems();

    this.timeline = new Timeline(
      this.timelineContainer.nativeElement,
      this.items,
      this.groups,
      this.options
    );
  }
}

html：

<div class='timeline-container' #visualization>
</div>

Answer 1

经过一段时间的深入研究，简短的答案是肯定的，它可以在web组件中使用。唯一的问题是，库将样式附加到文档中，然后所有样式都会丢失，高度也不正确。因此，临时的解决方案是@导入web组件中的缩小css。vis-timeline仍然将样式附加到文档中，它在@import之后被复制，如果某些类与vis-timeline html类具有相同的名称，则可能会出现问题。所以，这是一个暂时的解决方案。