Is it possible to access the shadow dom of an SVG

user_1283776 0
Viewed 270

Here is an svg with a use element:

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
</svg>

In the inspector I can see that the use element has a shadow root:

<use href="#myCircle" x="10" fill="blue">
  #shadow-root (closed)
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"></circle>
</use>

Is it possible to somehow call methods such as getBBox() on the <circle> in the shadow dom?

If there is no straight-forward way, maybe there is some trick to allow me to access the closed shadow root?

svg javascript
1 Answers

In this case, it looks like no:

If you attach a shadow root to a custom element with mode: closed set, you won't be able to access the shadow DOM from the outside — myCustomElem.shadowRoot returns null. This is the case with built in elements that contain shadow DOMs, such as <video> [or svg].

Source: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Basic_usage

Since the web inspector is listing the shadow root as closed, it isn't accessible via javascript.

user_80318150
Related