Custom web components wrapped in <template> prevent other instances from initialising

[lairdkruger]

Astro Info

Astro                    v5.17.1
Vite                     v6.4.1
Node                     v25.2.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Custom web components that are wrapped in a template tags prevent further instances of the component from initialising correctly.

Here is how I came across this issue:

1. CartLine component is rendered in a tag and later cloned to create the Cart
2. CartLine component contains a custom web component which adds multiple event listeners in its connectedCallback() function
3. web component is also used later on in the document, in the AddToCart component
4. Because it's first mounted within the tags, the AddToCart instance of the QuantitySelector doesn't have its event listeners initialised

   Note that order is important here: If I simply mount a hidden component before the CartLine tags, all instances of the are correctly initialized.

   It's only when the first instance of the is found within tags, do all of the instances of the fail to initialise.

   What's the expected result?

   Custom web components should initialise correctly, even if the first instance is mounted with tags.

   Link to Minimal Reproducible Example

   https://stackblitz.com/~/github.com/lairdkruger/astro-web-components-template-issue

   Participation

   • I am willing to submit a pull request for this issue.

[matthewp]

This one took me a minute to figure out. Yes, it's related to the deduplication of scripts. It's not really related to it being a web component at all, you can recreate this with any component that's used in a template and contains a script. The script is rendering inside of the template and not outside, so it's only triggered when the template is cloned and inserted.

We probably need some way to know that we are inside of a template to adjust the logic here.