1

I have installed lit as well as fontawesome as npm packages. I also use the Vaadin Router package for some routing.

Now I want to insert some icons on my own elements. While the icons are replaced correctely in the index html they are not in all the seperate elements. For replacing the icons I use the dom.i2svg method of the js-api from fontawesome. If I understood correctly this should also be used and activated automatically by using the npm package of frontawesome.

The files of interest are the following:

index.html

<body>
   <navigation-element></navigation-element>
   <i class="fab fa-linkedin"></i>
   <main>
       <div id="outlet"></div>
   </main>
   <footer-element></footer-element>
   <script src="./vendor/webcomponents-loader.js"></script>
</body>

index.js

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

const outlet = document.getElementById('outlet');
const router = new Router(outlet);
router.setRoutes([
    { path: '/', component: 'my-element' },
]);


library.add(fas, fab);
dom.i2svg();

my-element.js

import { dom } from '@fortawesome/fontawesome-svg-core';

class MyElement extends LitElement {
    static styles = css `
    :host {
        display: block;
    }
  `;
    connectedCallback() {
        super.connectedCallback();
        dom.i2svg(); // does not work in here
    }
    render() {
        return html `
            <i class="fas fa-kiwi-bird"></i>
            <i class="fab fa-linkedin"></i>
            <div>
                <p> text </p>
                <p> text </p>
            </div>
        `;
    }
}

customElements.define('my-element', MyElement);

In the index.js I added my icons to the library and in the index.html the the i element is correctly replaced. But for the my-element nothing happens. The library is filled with the icons but no elements are replaced. I tried to call the dom.i2svg() and/or dom.watch(params) inside the connecedCallback function aswell as in the constructor.

I also tried various other things/functions like importing css. Someone else had a similar issue which could be solved on github, but this solution does not work for me.

Has someone an idea why? What did I wrong, is it maybe the router or is the api just broken?

theoretisch
  • 1,718
  • 5
  • 24
  • 34

1 Answers1

1

Your component extends from LitElement which means it has a shadow DOM that shields its internal HTML from external CSS. You can:

  1. Extend from View instead of LitElement to avoid using shadow DOM (if your project is based on Vaadin's Hilla starter)
  2. Override createRenderRoot() { return this; } in your LitElement to not use shadow DOM. This will disable shadow DOM for whole component.
  3. Include fontawesome styles in your component template with <style>
  4. Use slot for content intended to be in light DOM. This is better approach when you want to partially protect the implementation, e.g. your component is a layout with dynamic content.
Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
Marcus Hellberg
  • 1,853
  • 10
  • 16
  • Thank you! Hm view is not defined, is it from a special package? Point two removes the shadow DOM which is nice, but the icons are still no replaced, whatever I do. And point 3, I included the styles with (even though its not recommendet), but since the is not converted it also displays nothing. Also the css contains just sizing, all the icons are in js files which might be the reason then just css does not help? – theoretisch Apr 13 '22 at 00:27
  • 1
    Mentioned View class is defined in Vaadin's Hilla based application starters. It is just a convenience class that includes the override of createRenderRoot. Btw. Fourth alternative would be to have a slot for content you want to have in light dom. – Tatu Lund Apr 13 '22 at 03:44
  • @TatuLund Can I use the slots even when I use the router? The element where I want to insert the icons is loaded into the outlet. I tried to just add the slot to the outlet then but this does not work, which is understandable ... I also found https://github.com/vaadin/router/issues/468#issuecomment-651754144 so it really seem not to work. Or do I look at the wrong place? Maybe I also need to install an extra package to get it work. i.e. I dont have the view element.. – theoretisch Apr 13 '22 at 17:43