CODEWITHSUNDEEP
javascriptvaadinfont-awesomelitvaadin-router
theoretisch
theoretisch

Reputation: 1728

Lit-Html js-api does not replace icon-elements

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?

Upvotes: 2

Views: 534

Answers (1)

Marcus Hellberg
Marcus Hellberg

Reputation: 1923

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.

Upvotes: 3

Related Questions