connectedCallback() — astro Function Reference

Architecture documentation for the connectedCallback() function in astro-island.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ connectedCallback() — astro Function Reference

Dependency Diagram

graph TD
  e9a8eb59_b5bf_1bd6_cfd7_96590d01e561["connectedCallback()"]
  02e19bde_95de_08cd_0c93_61e01849e86b["AstroIsland"]
  e9a8eb59_b5bf_1bd6_cfd7_96590d01e561 -->|defined in| 02e19bde_95de_08cd_0c93_61e01849e86b
  63d8a9e0_75ca_ac42_b069_6928c8be4c0c["childrenConnectedCallback()"]
  e9a8eb59_b5bf_1bd6_cfd7_96590d01e561 -->|calls| 63d8a9e0_75ca_ac42_b069_6928c8be4c0c
  style e9a8eb59_b5bf_1bd6_cfd7_96590d01e561 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/astro-island.ts lines 59–89

		connectedCallback() {
			if (
				!this.hasAttribute('await-children') ||
				document.readyState === 'interactive' ||
				document.readyState === 'complete'
			) {
				this.childrenConnectedCallback();
			} else {
				// connectedCallback may run *before* children are rendered (ex. HTML streaming)
				// If SSR children are expected, but not yet rendered, wait with a mutation observer
				// for a special marker inserted when rendering islands that signals the end of the island
				const onConnected = () => {
					document.removeEventListener('DOMContentLoaded', onConnected);
					mo.disconnect();
					this.childrenConnectedCallback();
				};
				const mo = new MutationObserver(() => {
					if (
						this.lastChild?.nodeType === Node.COMMENT_NODE &&
						this.lastChild.nodeValue === 'astro:end'
					) {
						this.lastChild.remove();
						onConnected();
					}
				});
				mo.observe(this, { childList: true });
				// in case the marker comment got stripped and the mutation observer waited indefinitely,
				// also wait for DOMContentLoaded as a last resort
				document.addEventListener('DOMContentLoaded', onConnected);
			}
		}