npm i @vandeurenglenn/lite
import { LiteElement, property, query, state, html, css, customElement } from '@vandeurenglenn/lite'
@customElement('some-element')
class SomeElement extends LiteElement {
@property()
accessor items = ['hello', 'world']
render() {
return html`${this.items.map((item) => html`${item}`)}`
}
}
basic data binding using pubsub
import { LiteElement, property, html, customElement } from '@vandeurenglenn/lite'
@customElement
class ConsumerEl extends LiteElement {
@property({ consumes: true, type: Array })
accessor items
@property({ consumes: 'someunique-id', type: Boolean })
accessor drawerOpen
render() {
return html`${this.items.map((item) => html`${item}`)}`
}
}
import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
@property({ provides: true })
accessor items = ['hello', 'world']
@property({ provides: 'someunique-id', type: Boolean })
accessor drawerOpen = false
}
import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
@property({ type: Boolean })
accessor drawerOpen = false
// runs after render
onChange(propertyKey, value) {}
}
import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
@property({ type: Boolean })
accessor drawerOpen = false
// runs before render
willChange(propertyKey, value) {
return value // always return
}
}