updateStyle() — astro Function Reference

Architecture documentation for the updateStyle() function in radio-checkbox.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 2

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  4d20cf3f_90b4_1511_4f44_71f4b8d4c417["updateStyle()"]
  04f58904_0d97_86ee_add0_b47eed49defc["DevToolbarRadioCheckbox"]
  4d20cf3f_90b4_1511_4f44_71f4b8d4c417 -->|defined in| 04f58904_0d97_86ee_add0_b47eed49defc
  3ba3a162_2e0b_93c1_7fc9_8e8870b095aa["radioStyle()"]
  3ba3a162_2e0b_93c1_7fc9_8e8870b095aa -->|calls| 4d20cf3f_90b4_1511_4f44_71f4b8d4c417
  f5dc59b5_3fa5_ae5e_0ff2_a790bb8bdb31["connectedCallback()"]
  f5dc59b5_3fa5_ae5e_0ff2_a790bb8bdb31 -->|calls| 4d20cf3f_90b4_1511_4f44_71f4b8d4c417
  style 4d20cf3f_90b4_1511_4f44_71f4b8d4c417 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts lines 94–105

	updateStyle() {
		const styleElement = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');

		if (styleElement) {
			styleElement.innerHTML = `
				:host {
					--unchecked-color: var(--${this._radioStyle}-unchecked);
					--checked-color: var(--${this._radioStyle}-checked);
				}
			`;
		}
	}