[svgwg] Style inheritance for <use> element referencing external SVG (#1030)

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

== Style inheritance for <use> element referencing external SVG ==
I’ve recently logged [Bugzilla#1999686](https://bugzilla.mozilla.org/show_bug.cgi?id=1999686) for an unexpected style inheritance behavior in Firefox pertaining to `<use>` elements referencing SVG content from a separate document:

**index.html**:

```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Importing SVG with fragments</title>
 <style type='text/css'>
  #root {
   fill: red;
  }

  #symbol {
   fill: green;
  }
 </style>
</head>
<body>

 <svg>
  <use href='./root.svg#root'/>
 </svg>

 <svg>
  <use href='./symbol.svg#symbol'/>
 </svg>

</body>
</html>
```

**root.svg**:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg id="root" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x='0' y='0' width='100' height='100'/>
</svg>
```

**symbol.svg**:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <symbol id='symbol'>
    <rect x='0' y='0' width='100' height='100'/>
  </symbol>
</svg>
```

([Demo here](https://danburzo.ro/demos/svg/svg-shadow-dom/) for convenience)

I was surprised that CSS styles specified in the HTML file would match elements in the shadow tree created by `<use>`, given they’re fetched from an unrelated document.

The Firefox team posits that this is a consequence of following the Shadow DOM model from HTML. Could you please provide an opinion from the perspective of the SVGWG?

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


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

Received on Wednesday, 12 November 2025 20:52:37 UTC