# Components Components are the basic building block of a Cheetah site, and enable more complex behaviors through client-side JavaScript. For instance, here's a counter: To make a component, make a `component-name.html` file under your site's `components/` directory. For instance, to build a site header, you could put it in the `components/site-header.html` file. The simplest component contains only HTML, and maybe CSS; for instance, a basic site header might look like this:

```html

My Site

The best content, ever, anywhere.

```

Cheetah uses the magic of [declarative shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) to make components work, so styles, scripts, and even IDs are scoped to the component. You can access attributes using the `{{attribute name}}` syntax (if you want to put in a literal `{{ something }}`, you can escape it by putting a `!` character in front of it), and you can render children using the standard [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) API. Speaking of scripts, to make more complicated components (like the counter above), you'll want some JavaScript. For this, just put a ` ```

As you can see, to write a component script, just write as you usually would in a `componentDidMount()` method.