He instalado los paquetes lit y fontawesome como npm. También uso el paquete Vaadin Router para algunas rutas.
Ahora quiero insertar algunos íconos en mis propios elementos. Si bien los íconos se reemplazan correctamente en el índice html, no se encuentran en todos los elementos separados. Para reemplazar los iconos utilizo el método dom.i2svg de js-api de fontawesome. Si entendí correctamente, esto también debería usarse y activarse automáticamente usando el paquete npm de frontawesome.
Los archivos de interés son los siguientes:
índice.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>índice.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();mi-elemento.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); En el index.js agregué mis íconos a la biblioteca y en el index.html el elemento i se reemplazó correctamente. Pero para el my-element no pasa nada. La biblioteca se llena con los iconos, pero no se reemplaza ningún elemento. Traté de llamar a dom.i2svg() y/o dom.watch(params) dentro de la función connecedCallback, así como en el constructor.
También probé varias otras cosas/funciones como importar css. Alguien más tuvo un problema similar que podría resolverse en github, pero esta solución no funciona para mí.
¿Alguien tiene una idea de por qué? ¿Qué hice mal, es tal vez el enrutador o la API está rota?
Su componente se extiende desde LitElement , lo que significa que tiene un DOM oculto que protege su HTML interno del CSS externo. Puedes:
View en lugar de LitElement para evitar el uso de Shadow DOM (si su proyecto se basa en el iniciador Hilla de Vaadin)createRenderRoot() { return this; } en su LitElement para no usar shadow DOM. Esto deshabilitará el shadow DOM para todo el componente.<style>