Haunted Lit Element


A missing connection between Haunted and LitElement.

It makes it possible to use LitElement's features like
properties
and styles in Haunted.

> This project follows the open-wc recommendation.

Installation

``bash
npm i haunted-lit-element
`

Usage

This library provides component function that is made in the way as it is in Haunted.

$3

Similar to haunted but the base class is LitElement:

`javascript
import {html} from 'lit-html';
import {component} from 'haunted-lit-element';
window.customElements.define('my-el', component(() => htmlhello world));
`

$3

The second parameter in component function can be options or a base class
which should be derived from HauntedLitElement.

The options in most cases are properties
and styles from LitElement.
But it can actually be anything as at the end it is just a static field in the base class.
It is done in that way because there are LitElement extensions that use similar approach with their own configuration.

Example of defining options as second argument:
`javascript
import {css} from 'lit-element';
import {component} from 'haunted-lit-element';

const MyEl = () => { /.../ };

const properties = {myParam: {type: String}, /.../};
const styles = css/ my css styles /;

window.customElements.define('my-el', component(MyEl, {properties, styles}));
`

Example of defining base class as second argument:
`javascript
import {component, HauntedLitElement} from 'haunted-lit-element';

class MyExtHauntedLitElement extends HauntedLitElement {
// ... my own stuff
}

const MyEl = () => { /.../ };

window.customElements.define('my-el', component(MyEl, MyExtHauntedLitElement));
`

$3

If you want to use options and a base class than the base class is the second argument and options are the third.

Example of using LitElement's properties
and styles helper with a custom base class.

`html
mystring="hello world"
mynumber="5"
mybool
myobj='{"stuff":"hi"}'
myarray='[1,2,3,4]'
>



`

The output for properties is going to be:

`text
typeof mystring = string
typeof mynumber = number
typeof mybool = boolean
typeof myobj = object
Array.isArray(myarray) = true
`

Testing using karma


`bash
npm run test
`

Linting

`bash
npm run lint
``