SVG.js - How to access Elements in shadow-root (open) in Angular

Question

I'm currently working on an Angular Elements Project. In this custom component I want to use SVG.js 3+ . But since I need to use ViewEncapsulation.ShadowDom in my component, I'm facing some issues on inizializing SVG.js.

The standard process to create an SVG and to draw a rect would be like this:

this.draw = SVG().addTo("#SVGContainer").viewbox(0, 0, 300, 140);
this.draw.rect(100, 100).move(100, 50).fill('#f06')

The problem here is that .addTo("#SVGContainer") only can find Elements which are not in the shadow-root. I have tested it with my component which uses shadow-root and with a container which doesn't use shadow-root. As expected SVG.js worked in the Angular Project without Shadow Dom, but didn't work in the Project which uses shadow-root.

I know that with container.shadowRoot.querySelector(".test").innerHTML you are able to access shadow elements, but the function .addTo() only allowes me to pass the id of my element, so there is no option to pass the dom element itself.

Since ViewEncapsulation.ShadowDom is a requirement for my new custom web component I'm wondering if its possible to pass shadow-dom elements to SVG.js or if it just isn't possible at all.

Answer 1

Solved the problem. Just when I followed the suggestion to create an Issue on their Github, I came across this Github Issue in which a user says that it is nice that they support even shadow dom and it is nice that you can pass elements directly, but they should document it.

He said that you can pass elements directly. So I had to try one more time and well. It worked. I created a ViewChild Reference for my Container like this:

 @ViewChild('svgContainer') svgContainer: any;

and passed it to the .addTo() like this:

this.draw = SVG().addTo(this.svgContainer.nativeElement).viewbox(0, 0, 300, 140);

So there where 2 things why it didnt worked the first time. First I didnt find the documentation (if there is one) where they say you can pass the element itself. And also when I tried it the first time I forgott to add .nativeElement .