@enhance/custom-element
v1.2.4
Published
Enhance Custom Element base class
Downloads
164
Keywords
Readme
enhance-custom-element
Enhance Custom Element base class.
Install
npm i @enhance/custom-element
unpkg
import CustomElement from 'https://unpkg.com/@enhance/custom-element?module=true'
Usage
/pages/index.html
<my-header heading="YOLO!"></my-header>
/elments/my-header-element.mjs
function MyHeaderElement({ html, state }) {
const { attrs={} } = state
const { heading='default' } = attrs
return html`
<style>
:host {
color: red;
}
</style>
<h1>${heading}</h1>
`
}
/browser/index.mjs
import CustomElement from '@enhance/custom-element'
import MyHeaderElement from '../elements/my-header-element.mjs'
class MyHeader extends CustomElement {
constructor() {
super()
this.header = this.querySelector('h1')
}
render(args) {
return MyHeaderElement(args)
}
static get observedAttributes() {
return [ 'heading' ]
}
headingChanged(value) {
this.header.textContent = value
}
}
customElements.define('my-header', MyHeader)