Hi @rocky hemlock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#access variables defined in script tag
sterile birchBOT
In Astro, you can define local JavaScript variables inside of the frontmatter component script between the two code fences (---) of an Astro component. You can then inject these variables into the component’s HTML template using JSX-like expressions. However, these values are not reactive and will never change as Astro components are templates that only run once, during the rendering step.
Here's an example of how you can define and use variables in an Astro component:
---
const name = "Astro";
---
<div>
<h1>Hello {name}!</h1> <!-- Outputs <h1>Hello Astro!</h1> -->
</div>
In the above example, name is a variable defined in the script part of the Astro component and is used in the HTML template part of the component.
If you want to pass server-side variables from your component frontmatter into the client <script> or <style> tags, you can use the define:vars={...} directive. Any JSON-serializable frontmatter variable is supported, including props passed to your component through Astro.props. Here's an example:
---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
const message = "Astro is awesome!";
---
<style define:vars={{ textColor: foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--textColor);
}
</style>
<script define:vars={{ message }}>
alert(message);
</script>
In the above example, foregroundColor, backgroundColor, and message are variables defined in the script part of the Astro component and are used in the <style> and <script> tags using the define:vars directive.
Please note that using define:vars on a <script> tag implies the is:inline directive, which means your scripts won’t be bundled and will be inlined directly into the HTML.
For more information, you can refer to the Astro Documentation (https://docs.astro.build/en/core-concepts/astro-syntax#variables) and Directives Reference (https://docs.astro.build/en/reference/directives-reference#definevars).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
rocky hemlock
@sterile birch i want to pass variables defined in <script> tags in the HTML part on the component
sterile birchBOT
Let me check the knowledge base for you. One moment! :books:
In Astro, you can pass variables from the server to the client by storing them in data-* attributes in your HTML output. Scripts, including custom elements, can then read these attributes using an element’s dataset property once your HTML loads in the browser.
Here's an example of how you can do this:
---
const { message = 'Welcome, world!' } = Astro.props;
---
<!-- Store the message prop as a data attribute. -->
<astro-greet data-message={message}>
<button>Say hi!</button>
</astro-greet>
<script>
class AstroGreet extends HTMLElement {
constructor() {
super();
//...
// Here you can read `this.dataset.message` and get the value of the prop in the browser.
}
}
</script>
In the above example, a message prop is stored in a data-message attribute, so the custom element can read this.dataset.message and get the value of the prop in the browser.