Re: [w3c/webcomponents] How should various document internal references work when SVG is being used in shadow DOM (#179)

@TabAtkins,

I think we may have to tackle the issue of things represented as custom idents in CSS (like font family names) separately from discussing URLs.  URLs already have a concept of absolute vs relative, and CSS values that contain URLs are already made absolute based on their source file.

URLs and inheritance are still an issue, of course, especially to keep SVG use-element shadow trees working in a backwards-compatible way. For example:

```xml
<use href="#icon" fill="url(#gradient-from-this-file)">
```

The gradient needs to apply on the cloned shapes in the shadow DOM (which inherit the `fill` property), even though it is defined in the outer page as a hash-only URL, and there is nothing in the shadow that matches that hash.

I'm not sure how Chrome & Firefox currently implement this to make it work for `<use>` elements, but if we want to generalize & make it work in any shadow tree, then hash-only URLs would need to be made absolute when inheriting across a shadow boundary.

_______________________

PS, I just ran into this bug in a real-world project, where SVG text path inside a web component doesn't work in Safari!  So I do hope that coming up with a solution for every situation doesn't delay basic support for local hash-references in shadow DOM.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/179#issuecomment-434037312