Support rendering from within a shadow DOM

[patricknelson]

Describe the bug

Note: This is different from the ability of a component to render its own contents into a shadow DOM (that is already supported).

If a svelte-retag managed custom element exists within another custom element's shadow DOM, it will not render properly since it cannot be found by the document.querySelectorAll('[data-svelte-retag-render]') query selector inside of renderElements(). This centralized render function is still necessary to ensure that proper top-down rendering is performed in order to support context.

Reproduction

<parent-element>
	<!-- initial HTML in declarative shadow DOM (note: illustrative only, doesn't have to be declarative) -->
	<template shadowrootmode="open">
		<child-element></child-element>
	</template>
</parent-element>

Once parent element renders, the child element will look like one of the following:

Light DOM: If <child-element> doesn't have its own separate shadow DOM:

<child-element data-svelte-retag-render="light">
	<svelte-retag></svelte-retag>
</child-element>

Shadow DOM: If <child-element> does have its own separate shadow DOM:

<child-element data-svelte-retag-render="shadow">
	#shadow-root <!-- will be empty -->
</child-element>

System Info

System:
    OS: Linux 6.6 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 11.02 GB / 15.62 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 22.11.0 - /home/patnelson/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - /home/patnelson/.nvm/versions/node/v22.11.0/bin/yarn
    npm: 10.9.0 - /home/patnelson/.nvm/versions/node/v22.11.0/bin/npm
  Browsers:
    Chrome: 121.0.6167.184
  npmPackages:
    svelte: ^4.2.0 => 4.2.0
    svelte-retag: 1.8.2 => 1.8.2

Severity

annoyance