haunted-styles
v0.0.1
Published
Haunted Styles Hook for Haunted
Downloads
16
Readme
Haunted Styles Hook for Haunted 🦇 🎃
Hooks Style API for Haunted web components to include styles as part of the component definition.
<!DOCTYPE html>
<my-counter></my-counter>
<script type="module">
import { css, unsafeCSS } from "https://unpkg.com/lit-element/lib/css-tag.js";
import { component, useState, html } from "https://unpkg.com/haunted/haunted.js";
import { useStyles } from "https://unpkg.com/bvkimball/haunted-styles.js";
function Counter() {
const [count, setCount] = useState(0);
useStyles(
() => css`
:host {
display: inline-block;
background: ${unsafeCSS(count > 5 ? "green" : "red")};
}
`
);
return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>
Increment
</button>
`;
}
customElements.define("my-counter", component(Counter));
</script>Getting started
A starter app is available on codesandbox and also can be cloned from this repo. This app gives you the basics of how to use Haunted and build components.
Advanced Usage
useStyles
Add styles to your shadow dom like you would with lit-element.
// TBDLicense
BSD-2-Clause