append_styles() — svelte Function Reference

Architecture documentation for the append_styles() function in css.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 2

Entity Profile

ClientRuntime→ Hydration→ append_styles() — svelte Function Reference

Dependency Diagram

graph TD
  798a6bbb_696a_b1fa_eb41_2653c2a6b1bf["append_styles()"]
  dd87479e_8330_8a43_936a_83ad4324992e["css.js"]
  798a6bbb_696a_b1fa_eb41_2653c2a6b1bf -->|defined in| dd87479e_8330_8a43_936a_83ad4324992e
  a985ae40_8ef8_7ef2_adad_116fbf97e70c["effect()"]
  798a6bbb_696a_b1fa_eb41_2653c2a6b1bf -->|calls| a985ae40_8ef8_7ef2_adad_116fbf97e70c
  b41287eb_7238_7aeb_ba63_1acdf7f7f950["register_style()"]
  798a6bbb_696a_b1fa_eb41_2653c2a6b1bf -->|calls| b41287eb_7238_7aeb_ba63_1acdf7f7f950
  style 798a6bbb_696a_b1fa_eb41_2653c2a6b1bf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/css.js lines 9–32

export function append_styles(anchor, css) {
	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
	effect(() => {
		var root = anchor.getRootNode();

		var target = /** @type {ShadowRoot} */ (root).host
			? /** @type {ShadowRoot} */ (root)
			: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;

		// Always querying the DOM is roughly the same perf as additionally checking for presence in a map first assuming
		// that you'll get cache hits half of the time, so we just always query the dom for simplicity and code savings.
		if (!target.querySelector('#' + css.hash)) {
			const style = document.createElement('style');
			style.id = css.hash;
			style.textContent = css.code;

			target.appendChild(style);

			if (DEV) {
				register_style(css.hash, style);
			}
		}
	});
}