How to get to a SVG that was implemented via use?

[Robert Wildling]

Hi, fellow GSAPers!

 

In my effort to adopt best SVG practices, I now switched to the "use" method of implementing SVGs. Unfortunately, it seems that I cannot access the implemented SVG to manipulate its path with GSAP. And google only spits out tutorials about how to add a shadowDom.

 

My question: is there any way to access the shadowDom of <use> (which are of `mode: closed` according to the devConsole), get a path and animate it with GSAP?

 

Things like this return null:
`let pathConnectRoot = document.querySelector('.platine__info--connect use')  // null`
`let pathConnectRoot = document.querySelector('.platine__info--connect use').shadowRoot.querySelector('path')  // error`

 

(..which is given as an example here: `https://www.oreilly.com/library/view/modern-javascript/9781491971420/ch05.html`)

 

Thank you!

 

PS: I think this question does not require a codepen... right?

[OSUblake]

1 hour ago, Robert Wildling said:

In my effort to adopt best SVG practices, I now switched to the "use" method of implementing SVGs.

 

Where did you read that was a best practice? Get your money back because there is nothing true about that. <use> elements require more memory and can be SLOWWWWWWWWW to render.

http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/

 

Haven't you've asked about the Shadow DOM before? You cannot, under any circumstance, access the shadow DOM of a builtin, e.g. <use>, <video>, <input>. You can access the Shadow DOM of a Web Component, but you probably shouldn't do that either. They are not designed to be manipulated from outside the component.

 

Summary. Don't use <use> elements unless there is an obvious reason. There are reasons, but they aren't common.

[Robert Wildling]

@OSUblake Thank you for your clear answer!!  And the slide!!

 

To my knowledge, this is the first time that I ask about shadowDom... haven't done anything with it before.

The "best practice" argument comes from many sources that say that an externally loaded svg can be cached. Which is a reasonable argument. And since I indeed use some of my svgs many, many times (and it is not just a straight line, but wild stuff), I went down that road...

 

Well, I will look for a different approach now...

 

PS: There are situations in this text editor, where the cursor keys won 't work. Any idea, what could cause that?

[OSUblake]

On 12/2/2018 at 12:13 PM, Robert Wildling said:

The "best practice" argument comes from many sources that say that an externally loaded svg can be cached. 

 

Basically everything you load can be cached as long as it points to an actual location on a server i.e. a URL that doesn't have a "?" question mark in it.

 

On 12/2/2018 at 12:13 PM, Robert Wildling said:

PS: There are situations in this text editor, where the cursor keys won 't work. Any idea, what could cause that?

 

Yes, I've noticed that too. It usually happens after tagging somebody with the @ symbol. I usually just reload the page when it messes up. Everything you wrote should be saved, so you won't have to start over.