[svgwg] shadow dom confusion (#1093)

matthiasclasen has just created a new issue for https://github.com/w3c/svgwg:

== shadow dom confusion ==
The spec is not very explicit on the expected behavior of use shadow trees, apart from a passing reference to other specs.

After wandering through the web spec layrinth for a while I came up with a test case:

```
<svg xmlns='http://www.w3.org/2000/svg'
   viewBox='0 0 100 100' fill='red'>
  <style> rect:hover { fill: green }</style>
  <g id='group'>
     <a href='#shift'>
      <rect x='0' y='0' width='50' height='50'>
        <animateTransform id='shift'
          attributeName='transform'
          type='translate'
          values='0 0; 50 0; 0 0'
          dur='2s'
          begin='shift.click'/>
      </rect>
    </a>
  </g>
  <use href='#group' y='50' fill='blue'/>
</svg>
```

<img width="300" height="300" alt="Image" src="https://github.com/user-attachments/assets/0d5fdaba-e802-4375-8d7d-f130c5e08b55" />

My expectation is that clicking on each square should animate just that square (because the animation gets cloned into the shadow tree together with the link it is referring to, so clicking on the instance in the shadow tree should activate the cloned animation. Browsers do many different things, but not the right thing.

----

I was willing to give the browsers a pass on animations since they like css animations better, I made another test case:

```
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 80'>
  <defs>
    <linearGradient id='external-gradient' x1='0%' y1='0%' x2='100%' y2='0%'>
      <stop offset='0%' stop-color='red'/>
      <stop offset='100%' stop-color='blue'/>
    </linearGradient>

  </defs>

  <g id='group-for-use'>
    <rect x='0' y='0' width='20' height='20' fill='url(#external-gradient) cyan'/>
    <rect x='25' y='0' width='20' height='20' fill='url(#external-gradient) green'/>
  </g>

  <use href='#group-for-use' x='0' y='40'/>
</svg>
```

<img width="300" height="240" alt="Image" src="https://github.com/user-attachments/assets/850bb744-3412-47ac-9939-b6b03da750a6" />

My expectation is that directly rendered rects should have gradients, while the cloned ones should have the fallback colors. But in all the browsers I tried, I see four gradients.

---

What gives ? Can this be clarified ?

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/1093 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 16 April 2026 10:52:02 UTC