updateStyle() — astro Function Reference

Architecture documentation for the updateStyle() function in window.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 2

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  2e15ff54_fbc1_3739_6921_6e7f1562d9ec["updateStyle()"]
  070fa425_a66f_4317_5d41_ecd0751196f7["DevToolbarWindow"]
  2e15ff54_fbc1_3739_6921_6e7f1562d9ec -->|defined in| 070fa425_a66f_4317_5d41_ecd0751196f7
  5fadb331_0cc5_1829_3ede_a00204036fa7["placement()"]
  5fadb331_0cc5_1829_3ede_a00204036fa7 -->|calls| 2e15ff54_fbc1_3739_6921_6e7f1562d9ec
  7ddf2870_34df_71d6_ac5d_b88c66c2e7db["connectedCallback()"]
  7ddf2870_34df_71d6_ac5d_b88c66c2e7db -->|calls| 2e15ff54_fbc1_3739_6921_6e7f1562d9ec
  style 2e15ff54_fbc1_3739_6921_6e7f1562d9ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts lines 116–139

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
		if (style) {
			const styleMap: Record<Placement, string> = {
				'bottom-left': `
					:host {
						left: 16px;
					}
				`,
				'bottom-center': `
					:host {
						left: 50%;
						transform: translateX(-50%);
					}
				`,
				'bottom-right': `
					:host {
						right: 16px;
					}
				`,
			};
			style.innerHTML = styleMap[this.placement];
		}
	}