connectedCallback() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient calls 1

Entity Profile

DevToolbar→ ToolbarClient→ connectedCallback() — astro Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

	async connectedCallback() {
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
					border: 1px solid rgba(52, 56, 65, 1);
					width: min(640px, 100%);
					max-height: 480px;
					border-radius: 12px;
					padding: 24px;
					font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
					color: rgba(191, 193, 201, 1);
					position: fixed;
					z-index: 999999999;
					bottom: 72px;
					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
				}

				@media (forced-colors: active) {
					:host {
						background: white;
					}
				}

				@media (max-width: 640px) {
					:host {
						border-radius: 0;
					}
				}

				::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
					font-weight: 600;
					color: #fff;
				}

				::slotted(h1) {
					font-size: 22px;
				}

				::slotted(h2) {
					font-size: 20px;
				}

				::slotted(h3) {
					font-size: 18px;
				}

				::slotted(h4) {
					font-size: 16px;
				}

				::slotted(h5) {
					font-size: 14px;
				}

				hr, ::slotted(hr) {
					border: 1px solid rgba(27, 30, 36, 1);
					margin: 1em 0;
				}

				p, ::slotted(p) {
					line-height: 1.5em;
				}
			</style>
			<style id="selected-style"></style>

			<slot />
		`;

		this.updateStyle();
	}