Creé un componente web, lo subí a npm y lo importé a otro proyecto.

Uso webpack para agrupar todo el código utilizado en el componente web, lo que crea un archivo de paquete (en mi caso, index.js ).

Esta es la estructura de mi carpeta dist:

 /dist /static /images /fonts index.js

Todo funciona, excepto cargar imágenes o fuentes (archivos estáticos). ¿Cómo se puede superar este problema? Acabo de agregar los archivos estáticos a un repositorio público de github en este momento y los cargué desde allí. Pero no creo que esta sea la forma correcta de hacerlo.

Supongo que si las imágenes no son tan grandes, se pueden convertir a base64 y simplemente empaquetarlas con el resto del código.

Alguna idea

Encontré una pregunta similarLas rutas en los componentes web son relativas a la raíz .

La especificación del componente web define que las URL siempre son relativas al documento principal. Esto, por supuesto, rompe la encapsulación del componente web, como concluyó correctamente. En otras palabras, la especificación tiene errores y mucha gente se queja de ello.