Component script not bundled by astro if component is used within HTML Template tag of the page

[fulstadev]

Take the following example component:

Dummy.astro:

<h1>Dummy</h1>

<script>
    console.log("Hello World");
</script>

Now code an index.astro file with the following contents:

---
import Dummy from "./Dummy.astro";
---
<h1>Hello World!</h1>
<template>
    <Dummy/>
</template>
<Dummy/>

This will lead to the fact that astro will never bundle the script of the Dummy component. You will only see the Hello World console log after removing the Dummy component from the template tag. Astro seems to not include scripts of the component if it is within a template tag, even if it is rendered into the page too, outside of the template tag.

Is this a bug?

I found out that adding is:inline on the script tag fixes this, but this only works as long your script does not import any ES modules, so I guess this is not really the right solution.

[fulstadev]

I see that pretty much the same issue was reported here , e.g. https://github.com/Aviortheking/astro-template-not-running-js/blob/master/src/pages/index.astro; but this is not solved and does not behave as expected? As mentioned above, the is:inline workaround (suggested here and also in the linked issue) is not possible for scripts that import ES modules.

IMHO, this makes Astro significantly less compatible with HTML Templates. You will have to memorize for each component if you use a component within it within a template tag, because as soon as you do, if you then add that component wherever else into the regular markup of the same page (which may be several astro components away from the concerned component), it will not have its script bundled. For large projects this becomes quite cumbersome; it also took me hours to figure out that this was the actual issue; as also no warning whatsoever is shown in astro check, astro build, or astro dev, ....

Also, it makes it impossible to use astro components with complex scripts (e.g. that import other ES Modules, as is:inline cannot be used there) within HTML templates at all, as that will "disable" its script functionalities even for components rendered outside the template tag; as mentioned above. This makes it practically impossible to use web components with multiple script dependencies within HTML template tags, which is really not something we expected, and thus currently is a huge issue for us, as our stack is strongly built based on web components; an API that is recommended multiple times in astro‘s docs too..

[fulstadev]

So my current workaround for this problem is:

TemplateTagHoldingAstroComponents.astro :

---
interface Props {
    /**
     * HTML ID of the Custom Template Tag
     */
    id?: string;
}

const {id} = Astro.props;
---

<astro-template class="astro-template" {id}>
	<slot/>
</astro-template>

<style>
    /* Simulate the same behaviour as an HTML Template Tag */
    .astro-template {
        display: none;
        height: 0;
        width: 0;
        overflow: hidden;
        pointer-events: none;
    }
</style>

astro_template.ts :

/**
 * Load template into page
 *
 * @param {Node} `Node` returned by a `get_template_containing_astro_components` call
 * @param {string|HTMLElement} targetElementOrElementsId element into which content shall be appended / its ID
 *
 * @return {Node} returns the same type of object as the type of the specified templateContent.
 *     If used in conjunction with what is returned from a call to get_template_containing_astro_components,
 */
function insert_template(
    templateContent: Node,
    targetElementOrElementsId: string | HTMLElement,
): Node {

    const targetElement = (typeof targetElementOrElementsId === "string"
                           ? document.getElementById(targetElementOrElementsId)
                           : targetElementOrElementsId);

    if (targetElement === null) {
        throw new Error(`Target element could not be found!`);
    }

    return targetElement.appendChild(templateContent);

}

/**
 * @param {string} id HTML ID of the concerned TemplateTagHoldingAstroComponents
 * @param {HTMLElement | undefined} parentElement if provided, searches for the template using `querySelector` applied
 *     to that element instead of scanning the entire document. In this way, templates can be found in a more scoped
 *     way, if needed.
 * @returns {Node} outermost HTML Element of the HTML Template (attaching event listeners and children will work)
 */
function get_template_containing_astro_components(
    id: string,
    parentElement: HTMLElement | undefined = undefined
): Node {

    const templateContainingAstroComponent = parentElement !== undefined
                     ? parentElement.querySelector(`#${id}`)
                     : document.getElementById(id);

    if (templateContainingAstroComponent === null) {
        throw new Error(`Template containing astro components with the ID '${id}' could not be found!`);
    }

    if (templateContainingAstroComponent.children.length !== 1) {
        throw new Error(`Template containing astro components with the ID '${id}' has more than one child!`);
    }

    return templateContainingAstroComponent.children[0].cloneNode(true);

}

export {
    insert_template,
    get_template_containing_astro_components,
}

Then, instead of:

---
import Dummy from "./Dummy.astro";
---
<h1>Hello World!</h1>
<template>
    <Dummy/>
</template>
<Dummy/>

You do:

---
import Dummy from "./Dummy.astro";
---
<h1>Hello World!</h1>
<TemplateTagHoldingAstroComponents>
    <Dummy/>
</TemplateTagHoldingAstroComponents>
<Dummy/>

...and Dummy's script will be bundled. Done in this way such that, if Astro decides to fix this, all you have to do is modify:

• TemplateTagHoldingAstroComponents into using template as its outermost tag
• the get_template_containing_astro_components and the insert_template according to the specs.