what is the root margin for client:visible
#root margin client:visible
sleek plaza
night turtleBOT
Hi @sleek plaza. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about a root margin for the client:visible directive in Astro.
However, the client:visible directive in Astro is used to control when a component's JavaScript is sent to the client. Specifically, it only sends the JavaScript when the component becomes visible on the page.
For more detailed information, you may want to refer to the Astro Documentation (https://docs.astro.build).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sleek plaza
what do you know about client:visible
@night turtle what do you know about client:visible
night turtleBOT
Let me check the knowledge base for you. One moment! :books:
The client:visible directive in Astro is used to control the hydration of UI Framework components on the page. By default, a UI Framework component is not hydrated in the client, meaning its HTML is rendered onto the page without JavaScript. If the client:visible directive is provided, the component's JavaScript is sent to the browser only when the component becomes visible on the page.
Here's an example of how it's used:
<InteractiveCounter client:visible />
In this example, the JavaScript for the InteractiveCounter component will not be sent to the client until the user scrolls down and the component becomes visible on the page.
It's important to note that a client directive can only be used on a UI framework component that is directly imported into a .astro component. Hydration directives are not supported when using dynamic tags and custom components passed via the components prop.