# Client-Side Scripts
Course: [Astro](https://www.devtutorials.ai/learn/astro) · Section: Build Pages
Source: https://www.devtutorials.ai/learn/astro/build-pages/client-side-scripts
> Script tags in Astro components, how scripts are bundled and run once, importing npm packages, TypeScript in scripts, is:inline and define:vars, event handling in repeated components, data attributes, web components, scripts from public/ and Partytown.
## Client-Side Scripts
- So far, every page has been plain HTML. Nothing reacts to clicks.
- A **client-side script** is JavaScript that runs in the visitor's browser.
- In Astro, you add one with a normal `
`,
"src/pages/index.astro": `---
---
Asha's Dev Journal
Reading at night is easier on dark pages.
`,
}}
/>
What happened:
- The heading and paragraph are plain HTML. They need no JavaScript.
- Only the button got a script.
- The script sets `data-theme` on the `` tag. The global CSS reacts to it.
- `localStorage` remembers the choice. On a real site, it lasts between visits.
### What You Will Learn
In this lesson, you will learn:
1. How Astro processes a `
```
- Astro bundles the package into your script. The visitor downloads only what you used.
### Scripts Run Only Once
- If a component appears 10 times on a page, its `
`,
}}
/>
- The processed script became `
`,
"src/pages/index.astro": `---
---
Why I chose Astro
My first component
Props made simple
`,
}}
/>
- Click each button. Each one counts on its own.
- **HTML sent to browser** has three buttons but only one script.
**Simple lesson:** loop with `querySelectorAll()`, and work inside each copy.
## Passing Data to Scripts
### Data Attributes
- **Data attribute** = an attribute that starts with `data-`, such as `data-post-id="42"`.
- You set it from the component script: `
`,
"src/pages/index.astro": `---
---
Click a button.
`,
}}
/>
**Simple lesson:** put values in `data-` attributes at build time. Read them with `dataset` in the browser.
## Web Components
### Custom Elements in Astro Components
- **Web component** = your own HTML tag, such as ``, with its own behaviour. Browsers support them without any framework.
- **Custom element** = the JavaScript class behind the tag. You register it with `customElements.define()`.
- The tag name must contain a dash: `reading-timer`, not `readingtimer`.
### connectedCallback
- `connectedCallback()` runs each time a copy of the tag appears on the page.
- So each copy sets itself up. There is no need for `querySelectorAll()`.
### Passing Data to Custom Elements
- Use `data-` attributes again. Inside the class, read `this.dataset`.
`,
"src/pages/index.astro": `---
---
A short note
A long guide
`,
}}
/>
**Simple lesson:** a custom element sets up each copy by itself in `connectedCallback()`.
## External Scripts
### Loading Scripts from public/
- A script file in `public/` is not processed.
- Load it with ``.
- Use this for files that must keep their exact name and content.
### Third-Party Scripts with Partytown
- **Third-party script** = code from another company, such as analytics or ads.
- These scripts can slow your page, because they run on the browser's main thread.
- **Partytown** = an optional integration that moves them to a **web worker**, a background thread.
- Add it with `npx astro add partytown`. Then mark the script: `