updateStyle() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient called by 2

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  460b5a9d_00a2_547d_5983_3d27ee441c6f["updateStyle()"]
  937950d6_9d1e_50fa_0b42_45d8c1f9fbc1["DevToolbarSelect"]
  460b5a9d_00a2_547d_5983_3d27ee441c6f -->|defined in| 937950d6_9d1e_50fa_0b42_45d8c1f9fbc1
  5dceb0c3_79f1_ff35_225c_b77b010296fe["selectStyle()"]
  5dceb0c3_79f1_ff35_225c_b77b010296fe -->|calls| 460b5a9d_00a2_547d_5983_3d27ee441c6f
  135f7f9d_9e0e_7e2e_11c4_3171da9c2300["connectedCallback()"]
  135f7f9d_9e0e_7e2e_11c4_3171da9c2300 -->|calls| 460b5a9d_00a2_547d_5983_3d27ee441c6f
  style 460b5a9d_00a2_547d_5983_3d27ee441c6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts lines 98–108

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
		if (style) {
			style.innerHTML = `
        :host {
          --text-color: var(--${this.selectStyle}-text);
          --border-color: var(--${this.selectStyle}-border);
        }
      `;
		}
	}