michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add script tag example (#1435)

Browse source 
* Add script tag example

Added example of using Astro with client side JavaScript

* Removed partial hydration example comment
This commit is contained in:
AsyncBanana 2021-09-28 10:25:58 -04:00 committed by GitHub
parent 6611b6b931
commit dd4234a5b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/src/pages/core-concepts/component-hydration.md
View file

@ -95,6 +95,19 @@ To make your Astro component interactive, you will need to convert it to the fro
Alternatively, you could add a `<script>` tag to your Astro component HTML template and send JavaScript to the browser that way. While this is fine for the simple stuff, we recommend a frontend framework for more complex interactive components.
```astro
---
// Example: Using Astro with script tags
---
<h1>Not clicked</h1>
<button>Click to change heading</button>
<script>
document.querySelector("button").addEventListener("click",() => {
document.querySelector("h1").innerText = "clicked"
})
</script>
```
[mdn-io]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
[mdn-ric]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
[mdn-mm]: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia