I have turned a Flutter web app into custom element, which I am publishing as an npm package.

The output of a Flutter web build is a html file (within which some scripts are run), so a quick way to turn this is a custom element is to wrap it in an iframe. The custom element has the general form:

class CustomElement extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
            <iframe src="src/flutter_output.html"></iframe>`; 

Running on localhost, no problem.

Published to npm, yes problem.

This is because the src path in the iframe is relative to the home dir of the users index.html, so if the user has installed the package locally, the src should be something like "./node_modules/@package/flutter_output.html" (hard-coding where the package file will be feels dangerous). Or if they are using unpkg, then presumably the src would link back to unpkg, e.g. unpkg.com/package/flutter_output.html (and this seems wasteful).

So the question is what src do I use in the iframe? Or is there another solution to this issue? I am new to web dev, so could quite easily have overlooked something.

A possible solution could be to lose the iframe and html entirely, by converting the flutter_output.html to javascript. Although this could be very painful.