- From: Amelia Bellamy-Royds via GitHub <noreply@w3.org>
- Date: Thu, 13 Nov 2025 20:36:46 +0000
- To: public-svg-issues@w3.org
re the Firefox implementation: I suspect that are simply not distinguishing between external and same-document content when they are building & styling the use-element shadow tree. For same-document `<use>` cross-references, using the rendering model defined in SVG 2, you *do* want to duplicate CSS style rules from the main document into the shadow tree, so that simple selectors would match within the shadow tree. This is not the same as treating them as light DOM elements: selectors match within each tree separately & don't apply across the shadow boundary (so, a `body > rect` selector wouldn't match in Dan's case). However, when the content being cloned comes from a different file, SVG 2 is quite clear that the style rules that should be cloned into the shadow tree are those defined in the external file: > [5.5.3. Style Scoping and Inheritance](https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance) > > The use-element shadow tree, like other shadow trees, exhibits style encapsulation, […]. This means that elements in the shadow tree inherit styles from its host ‘use’ element, but that style rules defined in the outer document do not match the elements in the shadow tree. Instead, the shadow tree maintains its own list of stylesheets, whose CSS rules are matched against elements in the shadow tree. > > When the referenced element is from the same document as the ‘use’ element, the same document stylesheets will apply in both the original document and the shadow tree document fragment. […] > > When the referenced element is from an external document, the stylesheet objects generated when processing that document apply to the shadow tree, and are read-only. […] User agents may re-use the same stylesheet objects for any shadow trees that reference that same external document. There probably needs to be some updates to the relevant text in the SVG 2 spec (which I wrote at a time when the HTML shadow DOM styling specs were still in flux) to make it more consistent with HTML shadow trees & templates. It should probably now use [Adoptable StyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets) as the reference model. So from that perspective, there is a related spec issue. There is also the bigger spec issue that the other browser engines, as far as I know, still use the SVG 1.1 model. Without an agreement for moving towards interop, the SVG 2 model can't be considered stable. In SVG 1.1, elements are cloned into the shadow tree along with the "cascaded" styles that applied to the original, instead of the style rules themselves being cloned & re-applied in the shadow context. SVG 1.1 is not clear about how this would work when cloning from an external file; presumably, you would need to generate a full CSS model for the external file. Last I checked, the browsers that use this model instead ignore any style rules from the external file other than those defined in cloned elements (that is, presentation attributes, style attributes, and any `<style>` element that is a descendent of the one linked by the use element). But either way: The current Firefox behaviour reported by @danburzo is inconsistent with the SVG spec (version 1 or 2). It is also inconsistent with shadow DOM built from HTML templates (which do not by default clone stylesheets from the parent document into the shadow tree unless the style element itself is part of the cloned template). -- GitHub Notification of comment by AmeliaBR Please view or discuss this issue at https://github.com/w3c/svgwg/issues/1030#issuecomment-3529619187 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 13 November 2025 20:36:47 UTC