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
npm i haunted-lit-element
Usage
This library provides component
function that is made in the way as it is in Haunted
.
component(MyEl)
Similar to haunted
but the base class is LitElement
:
;;windowcustomElements;
component(MyEl, optsOrBaseCls)
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:
;; const MyEl = { /*...*/ }; const properties = myParam: type: String /*...*/;const styles = css`/* my css styles */`; windowcustomElements;
Example of defining base class
as second argument:
; // ... my own stuff const MyEl = { /*...*/ }; windowcustomElements;
component(myEl, baseCls, opts)
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.
The output for properties is going to be:
typeof mystring = stringtypeof mynumber = numbertypeof mybool = booleantypeof myobj = objectArray.isArray(myarray) = true
Testing using karma
npm run test
Linting
npm run lint