From dd4234a5b5079e7fe6799d6fd9c52c6b299a0228 Mon Sep 17 00:00:00 2001
From: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com>
Date: Tue, 28 Sep 2021 10:25:58 -0400
Subject: [PATCH] Add script tag example (#1435)

* Add script tag example

Added example of using Astro with client side JavaScript

* Removed partial hydration example comment
---
 docs/src/pages/core-concepts/component-hydration.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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