If your script also needs to handle UI framework components, using a custom element is recommended. | Astro Lounge | Page 1

Hi @sour loom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Based on the knowledge sources, when the documentation says "handle UI framework components," it refers to interacting with or manipulating elements that are rendered by UI framework components (like React, Vue, Svelte, etc.) from within an Astro <script> tag.

The key issue is timing: elements rendered by a UI framework may not be available yet when a <script> tag executes. This is because framework components with client:* directives hydrate at different times depending on the directive used (e.g., client:load, client:idle, client:visible).

For example, if you have a React component that renders a button, and you want to add an event listener to that button from an Astro <script> tag, the button element might not exist in the DOM yet when your script runs. This is where using a custom element is recommended.

Custom elements solve this problem because the browser will run the custom element's `connectedCallback()` method each time it finds the custom element on the page, ensuring your code runs at the right time when the elements are actually available in the DOM.

#If your script also needs to handle UI framework components, using a custom element is recommended.

Custom elements solve this problem because the browser will run the custom element's `connectedCallback()` method each time it finds the custom element on the page, ensuring your code runs at the right time when the elements are actually available in the DOM.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#If your script also needs to handle UI framework components, using a custom element is recommended.

Custom elements solve this problem because the browser will run the custom element's connectedCallback() method each time it finds the custom element on the page, ensuring your code runs at the right time when the elements are actually available in the DOM.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Custom elements solve this problem because the browser will run the custom element's `connectedCallback()` method each time it finds the custom element on the page, ensuring your code runs at the right time when the elements are actually available in the DOM.