[svgwg] Need to better define what rules apply to an element in an <svg:use> subtree.

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

== Need to better define what rules apply to an element in an <svg:use> subtree. ==
https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance says:

> Instead, the shadow tree maintains its own list of stylesheets, whose CSS rules are matched against elements in the shadow tree. 

I don't think that's reasonable if the referenced element is in another document, since it means that base URIs should differ and such, and that itself means that the sheets should be reparsed, which is not acceptable.

Instead, what everyone seems to do is that document rules apply to the elements in the `<use>` shadow tree. Which is itself a bit of a hack. Indeed, everyone but Firefox don't implement selector-matching correctly, and they just seem to return the style of the referenced element.

For example, this should show green, but shows red in WebKit, Edge and Blink:

```css
<!doctype html>
<meta charset=utf-8>
<style>
.inside-use rect {
  fill: green;
}
defs .inside-use rect {
  fill: red;
}
</style>
<p>
  You should see a green square, and no red.
</p>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="square">
      <g class="inside-use">
        <rect width="100" height="100"/>
      </g>
    </g>
  </defs>
  <g id="test">
    <use xlink:href="#square" />
  </g>
</svg>
```

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

Received on Monday, 16 July 2018 13:16:16 UTC