use in the shadowDom (custom Element) about iconify HOT 6 CLOSED

Problem with shadow DOM is Iconify doesn't know it exists. When Iconify looks for placeholders, it checks only document.body.

One workaround would be to use Iconify.scanDOM(myShadowDom) after rendering it, however I haven't tested it on a shadow DOM, so not 100% sure if it would work. Added to "to test" list.

Another workaround would be to use Iconify.renderSVG(). It generates SVG element for icon. However its not straightforward either. If icon doesn't exist, it will return null. Workaround for that would be to wait for Iconify.loadIcons(), then render icon.

Documentation for version 2 is not ready yet. I've been working hard on documentation website over last few months, but didn't get to version 2 documentation yet. So here is short description of functions I've mentioned:

scanDOM() - scans DOM for placeholders. Optional parameter is root node, so you can try to use it with shadow DOM. You can find examples of usage in packages/browser-tests/*-scan-dom-*.ts

loadIcons() - loads icons, calls callback when its done. First parameter is array of icon names, second optional parameter is a callback to call when done. Callback has 4 arguments: array of loaded icons, array of missing icons, array of pending icons, function to remove callback. When you call loadIcons, it returns function that you can use to unsubscribe, so you can use it in case if callback is never called, but your component's lifespan ends. You can find examples of usage in packages/core/tests/30-api/20-loading-test.ts. All lists of icons in callbacks are icon objects, not strings.

renderSVG() - generates SVG node. First parameter is icon name, second optional parameter are attributes, same as in placeholder. It will return null if icon is missing.

from iconify.

I've changed behaviour of scanDOM function. If you call it with a custom root node as first parameter, that node will be temporarily added to list of root nodes, until all placeholders in that node are replaced. This makes it possible to run scanDOM on a shadow DOM root once instead of waiting for API to respond.

That means when you add placeholders to a shadow DOM, you can call scanDOM(shadowRoot) once and all icons will be replaced, even if it they aren't loaded yet.

Next step is to refactor observer module, so it could be used with multiple root nodes, which would make it possible to support multiple root nodes in observer. It will replace setRoot() with addRoot() and removeRoot() functions. This would give more flexible approach, allowing to automatically observe changes in shadow DOM, then unsubscribe when shadow DOM is no longer needed.

from iconify.

Fixed in beta 4.

Changes:

• scanDOM() has been renamed to scan(), it accepts optional node that will behave like I've described above.
• setRoot() has been removed.
• observe() and stopObserving() allow observing additional nodes. Parameter is node to observe.

from iconify.

Thanks for your kind and quick reply.

I arrived scanDOM(targetShadowDom). That definitely renders all icons at that time without any issue.
But it couldn't seem to observe new iconify created. So my approach would be applying scanDOM() just after final output. It is not so bad. Anyway it works.

Finally, I find setRoot(targetShadowDom. It seems to observe DOM and apply iconify-conversion automatically.

Thanks really again. This proves iconify is better than Font-Awesome in shadowDom!

from iconify.

Sorry, setRoot() just replace root observing. Maybe addObserveRoot() or similar be needed.
Anyway, I'll use scanDOM() until better solution found.
Thanks.

from iconify.

I'll close this issue atm, but if you can give an idea of observing-multi-roots, please leave it for me.

from iconify.