attachShadowRoots() — astro Function Reference

Architecture documentation for the attachShadowRoots() function in swap-functions.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine called by 1

Entity Profile

CoreAstro→ RenderingEngine→ attachShadowRoots() — astro Function Reference

Dependency Diagram

graph TD
  917fd60c_49ef_0698_5ba7_d23f06fc5c08["attachShadowRoots()"]
  12084e8e_15f3_27ac_8f8b_d442375ff33d["swap-functions.ts"]
  917fd60c_49ef_0698_5ba7_d23f06fc5c08 -->|defined in| 12084e8e_15f3_27ac_8f8b_d442375ff33d
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2["swapBodyElement()"]
  3d1986b3_a5c3_1ecd_66e2_b7d4e1f116b2 -->|calls| 917fd60c_49ef_0698_5ba7_d23f06fc5c08
  style 917fd60c_49ef_0698_5ba7_d23f06fc5c08 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/swap-functions.ts lines 106–122

function attachShadowRoots(root: Element | ShadowRoot) {
	root.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach((template) => {
		const mode = template.getAttribute('shadowrootmode');
		const parent = template.parentNode;
		if ((mode === 'closed' || mode === 'open') && parent instanceof HTMLElement) {
			// Skip if shadow root already exists (e.g., from transition-persisted elements)
			if (parent.shadowRoot) {
				template.remove();
				return;
			}
			const shadowRoot = parent.attachShadow({ mode });
			shadowRoot.appendChild(template.content);
			template.remove();
			attachShadowRoots(shadowRoot);
		}
	});
}