- From: Thomas Di Grégorio <notifications@github.com>
- Date: Sun, 22 Jan 2017 05:49:47 -0800
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/webcomponents/issues/179/274332039@github.com>
I assume that is the same issue as inline `<svg>` symbol library :
```html
<!DOCTYPE html>
<html>
<head>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-cog">
<path d="...."/>
</symbol>
<symbol id="icon-close">
<path d="...."/>
</symbol>
</svg>
</head>
<body>
<custom-element>
#shadow-root
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon-cog"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon-close"/>
</svg>
/shadow-root
</custom-element>
</body>
</html>
```
I would say here that the fragment identifier should cross shadow boundary in this case.
By replacing the `<svg>` library by another one (loaded via xhr) following the same symbol naming,
you can swith he whole app icon set on the fly.
Theme authors can distribute several icons set this way, following the use-land library icon's namming
convention it's targetting.
The workaround to this if not crossing is to reference an external file like so:
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<custom-element>
#shadow-root
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"
onclick="root.toggleMenu( settingsMenu )">
<use xlink:href="icons/library.svg#icon-cog"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"
onclick="window.close()">
<use xlink:href="icons/library.svg#icon-close"/>
</svg>
/shadow-root
</custom-element>
</body>
</html>
```
But if you need to change the `<svg>` library on the fly, you'll have to loop on each node to find shadow root to find nested `<svg><use>` and change the `xlink:href` manually, what can be a pain ...
------------------------------------
I assume fragment identifier issue have to resolve the same way for all use cases, so maybe it's not possible to
specify that "fragment identifier don't cross boundaries, but not in case of embed svg"
I don't have recommendation here, I'm just pointing out a use case to take care of for this issue !
--
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-274332039
Received on Sunday, 22 January 2017 13:50:19 UTC