use in the shadowDom (custom Element)

Thanks for your great work.

At this moment, I lost a way to apply iconify in the custom elements. Could you help me?

What I did;

1. I made a small and simple web component to display some messages on a page. I want to add some iconify icons in that custom element.
2. Of course, I’ve properly loaded iconify js (2.0.0-beta) on the page at first.
3. Also surely, icons are displayed normally outside of my custom element.
4. Slot also works. Icons injected with slot in shadowDom from the outer page would work as expected.
5. I could render a specific iconify icon with Iconify.renderSVG() in the customElement. This was a very hopeful sign for me because Iconify.js seems working in shadowDom without import JS in each customElement. When I tried with Font-Awesome, I should have injected all CSS rules into shadowDom because there be some issue about @font-face source path

But…

I’ve found only slotted icon was rendered again correctly. Other’s were not. Maybe my approach was totally wrong. EDIT Renderable icons seem being cached.

**Problem **

// index.html
<mz-test>
  <span slot="ic" class="iconify-inline" data-icon="mdi-ab-testing"></span>
</mz-test>

// mz-test shadowDom

<p id="test1">slotted icon: <slot name="ic"></slot></p>
<p id="test2">direct rendering icon slotted:</p>
<p id="test3">direct rendering icon unslotted:</p>
<p id="test4">how to auto-convert??: <span class="iconify" data-icon="noto:angry-face" data-inline="false"></span></p>

// Trying to rendering after connectedCallback
    var slotted = Iconify.renderHTML('mdi-ab-testing')
    var test2 = myShadowDom.querySelector('#test2')
    test2.innerHTML += slotted

    var unslotted = Iconify.renderHTML('mdi-account-box')
    var test3 = myShadowDom.querySelector('#test3')
    test3.innerHTML += unslotted

What is the best approach to use iconify in custom Element? Could you show some hint?

[cyberalien]

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.

[cyberalien]

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.