connectedCallback() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient calls 1

Entity Profile

DevToolbar→ ToolbarClient→ connectedCallback() — astro Function Reference

Dependency Diagram

graph TD
  e2666104_6dd2_32ae_a5dd_0cc91aef3385["connectedCallback()"]
  72415224_142e_1e36_4c77_8fc883507bf2["DevToolbarHighlight"]
  e2666104_6dd2_32ae_a5dd_0cc91aef3385 -->|defined in| 72415224_142e_1e36_4c77_8fc883507bf2
  700bfb4d_7404_0177_04f7_28819be7ca66["updateStyle()"]
  e2666104_6dd2_32ae_a5dd_0cc91aef3385 -->|calls| 700bfb4d_7404_0177_04f7_28819be7ca66
  style e2666104_6dd2_32ae_a5dd_0cc91aef3385 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts lines 105–129

	connectedCallback() {
		this.updateStyle();

		if (this.icon) {
			let iconContainer = document.createElement('div');
			iconContainer.classList.add('icon');

			let iconElement;
			if (isDefinedIcon(this.icon)) {
				iconElement = getIconElement(this.icon);
			} else {
				iconElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
				iconElement.setAttribute('viewBox', '0 0 16 16');
				iconElement.innerHTML = this.icon;
			}

			if (iconElement) {
				iconElement?.style.setProperty('width', '16px');
				iconElement?.style.setProperty('height', '16px');

				iconContainer.append(iconElement);
				this.shadowRoot.append(iconContainer);
			}
		}
	}