问题描述
我目前正在处理一个 Angular Elements 项目。在这个自定义组件中，我想使用 SVG.js 3+。
但由于我需要在组件中使用 ViewEncapsulation.ShadowDom，因此在初始化 SVG.js 时遇到了一些问题。
创建 SVG 和绘制矩形的标准流程如下：
this.draw = SVG().addTo("#SVGContainer").viewBox(0,300,140);
this.draw.rect(100,100).move(100,50).fill('#f06')
这里的问题是 .addTo("#SVGContainer") 只能找到不在 shadow-root 中的元素。我已经使用使用 shadow-root 的组件和不使用 shadow-root 的容器对其进行了测试。正如预期的那样，SVG.js 在没有 Shadow Dom 的 Angular 项目中工作，但在使用 shadow-root 的项目中不起作用。
我知道使用 container.shadowRoot.querySelector(".test").innerHTML 你可以访问 shadow 元素，但是函数 .addTo() 只允许我传递我元素的 id，所以没有选项传递 dom 元素本身.
由于 ViewEncapsulation.ShadowDom 是我的新自定义 Web 组件的要求，我想知道是否可以将 shadow-dom 元素传递给 SVG.js，或者根本不可能。
解决方法
解决了问题。就在我按照建议在他们的 Github 上创建一个问题时，我遇到了这个 Github Issue，其中一个用户说他们甚至支持 shadow dom 很好，并且可以直接传递元素很好，但是他们应该记录下来。
他说可以直接传递元素。所以我不得不再试一次。有效。 我为我的容器创建了一个 ViewChild 引用，如下所示：
@ViewChild('svgContainer') svgContainer: any;
并像这样将其传递给 .addTo()：
this.draw = SVG().addTo(this.svgContainer.nativeElement).viewbox(0,300,140);
所以有两件事为什么它第一次不起作用。首先，我没有找到他们说您可以传递元素本身的文档（如果有的话）。而且当我第一次尝试时，我忘记添加 .nativeElement。