I have created a web component, uploaded it to npm, and imported it into another project.

I use webpack to bundle all of the code used within the web component, which creates a bundle file (in my case index.js).

This is the structure of my dist folder:

/dist
  /static
    /images
    /fonts
  index.js

Everything works, except loading images or fonts (static files). How can this issue be overcome? I have just added the static files to a public github repo at the moment, and load them from there. But I do not think this is the right way to do it.

I guess if the images are not that large, they can be converted into base64 and just bundled with the rest of the code?

Any thoughts

Found a similar question Paths in Web Components are Relative to Root.

The webcomponent specification defines that URLs are always relative to the main document. This, of course, breaks web component encapsulation, as you rightly concluded. In other words, the specification is buggy, and lots of people are complaining about it.