@enhance/shadow-element
v1.0.6
Published
Enhance Shadow DOM element base class
Downloads
26
Keywords
Readme
enhance-shadow-element
Enhance Shadow DOM element base class
Install
npm i @enhance/shadow-element
unpkg
import ShadowElement from 'https://unpkg.com/@enhance/shadow-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 ShadowElement from '@enhance/shadow-element'
import MyHeaderElement from '../elements/my-header-element.mjs'
class MyHeader extends ShadowElement {
constructor() {
super()
this.header = this.shadowRoot.querySelector('h1')
}
render(args) {
return MyHeaderElement(args)
}
static get observedAttributes() {
return [ 'heading' ]
}
headingChanged(value) {
this.header.textContent = value
}
}
customElements.define('my-header', MyHeader)