@polight/lego/docs/content/v1/usage/reactive-style.md

Tiny Web-Components lib for future-proof HTML mentors

---
title: Reactive CSS
weight: 9
---

CSS is much more fun when it's scoped.
Here it come with the web-components.

Here again, no trick, just the full power of web-components and scoping styles.
Well, you should know that the css is reactive too! {{< emoji "😲" >}}

Writing CSS is as easy as

```html
<template>
  <h1>Bonjour!</h1>
</template>

<script>
  export default class extends Lego {
    init() {
      this.state = { fontScale: 1 }
    }
  }
</script>

<style>
  :host {
    font-size: ${state.fontScale}rem;
  }
  h1 {
    padding: 1rem;
    text-align: center;
  }
</style>
```

## Host

[`:host` is a native selector](<https://developer.mozilla.org/en-US/docs/Web/CSS/:host()>)
for web-components.
It allows to select the current component itself.

## Variables

You can use variables in your CSS just like in your templates.

Example:

```html
<template>
  <h1>Bonjour<h1>
</template>

<script>
  export default class extends Lego {
    init() {
      this.state = { color: '#357' }
    }
  }
</script>

<style>
  h1 {
    color: ${ state.color };
  }
</style>
```

will apply the `#357` color onto `h1`.