Add script tag example (#1435)

* Add script tag example

Added example of using Astro with client side JavaScript

* Removed partial hydration example comment

1 files changed, 13 insertions, 0 deletions

diff --git a/docs/src/pages/core-concepts/component-hydration.md b/docs/src/pages/core-concepts/component-hydration.md
index bb0fbce29..ce7e3c304 100644
--- a/docs/src/pages/core-concepts/component-hydration.md
+++ b/docs/src/pages/core-concepts/component-hydration.md
@@ -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