```js
import { LitElement, html, css } from "lit-element";
import { LitAtom, atom } from "@klaxon/atom";
const [count, setCount] = atom({
key: 'count',
default: 0
});
class MyCounter extends LitAtom(LitElement) {
static atoms = [count];
static styles = css`:host{display: block;}`
render() {
return html`
${this.count}
`;
}
}
customElements.define("my-counter", MyCounter);
class SharedAtom extends LitAtom(LitElement) {
static atoms = [count];
static styles = css`:host{display: block;}`
render() {
return html`
I'm a shared atom: ${this.count}
`;
}
}
customElements.define("shared-atom", SharedAtom);
```
## Loadable Atom