I know you're checking if (isOnActivePage) in all the methods, but I wouldn't mind either moving the check here, or duplicating the check if you want to be super safe (or have other code paths calling these methods)

+1 to this

This piece of code is mostly great but has a slight design issue, it creates two code paths depending on if the template is created or re-used.
Down the line this creates more complexity, e.g. you only resetCarouselScroll when re-using the template, not creating it. If you scroll on a PLP and click on a product, the scroll reset behavior would already be different.
You also shouldn't set active directly on the template as this is an option, if you wanted to prerender the templates that wouldn't work out of the box.

You could extract the template creation into a separate method, like

// pseudocode
getTemplate(templateId, featuredProduct, shoppingDataForPage) {
  return this.builtTemplates_[templateId] || (jsx);
}

And then in your updateTemplate:

// Pseudocode
updateTemplate(...) {
  ...

  forEach(template => removeAttr('active'));
  const template = getTemplate(...);
  // append template if !template.isConnected, set template active, resetScroll
}

isConnected 🔥 TIL.

Mind pulling this out into a new buildTemplate_(templateId, featuredProduct, shoppingDataForPage) method?

+1 to this