import.meta.document not referring to the module document, but rather the script

[aaronmars]

trafficstars

The transform for import.meta.document in html-module-transform.ts generates a selector for the script element that the expression appears in, like: 'script[data-inline-module-script="0"]'

According to the explanation in the MS explainer, import.meta.document is supposed to refer to the HTML Module document, not a the inner

I think the fix would be as simple as adding parentElement at the end.

Here's an example source illustrating the issue:

<template id="header">
    <div>HTML Modules</div>
</template>
<script type="module">
    let importDoc = import.meta.document;

    // Shouldn't need this line since `import.meta.document` is supposed to refer to this whole
    //  HTML document. The 
    importDoc = importDoc.parentElement;
    class Component extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({ mode: 'open' });
            const template = importDoc.querySelector('#header');
            shadowRoot.appendChild(template.content.cloneNode(true));
        }
    }
    customElements.define('my-component', Component);
</script>

[cdata]

Thanks for reporting @aaronmars

As you can probably tell, this project predated the latest proposals for HTML Modules, and hasn't received a lot of attention since Microsoft starting pushing for them.

PRs are welcome if you or anyone else wants to help us bring these transforms up to date with the latest proposals! 🙏

[aaronmars]

Cool! I'll see if I can find anything else.