feat: add support for rendering within template element or shadowRoot

[louis-bompart]

Problem statement

If one tries to use the template function within a template:

...
const {template} = getStorybookHelpers('my-component');
render: (args) => html`
  <template>
     template(args)
  </template>
`

This piece of code fails

storybook-helpers/src/html-templates.ts

Lines 327 to 331 in 9c67cc3

	const selectedComponent = document.querySelector(component.tagName!)!;
	argObserver?.observe(selectedComponent, {
	attributes: true,
	});
	});

Because the document.querySelector will fail, given that the element will be generated within another document.

Proposed solution

I don't think it's easily feasible to detect where a given component will render (especially with Storybook decorators), so instead, let's offer means for the consumer to "select" -up to a point¹- the element containing either the ShadowDOM or DocumentFragment containing the element.

To keep things consistent, apply similar logic to the window.component feature.

Footnotes

1. this won't work for level n2+ e.g. <template><template>....finallyTemplate(args)....</template></template> ↩