0.3.0 • Published 9 months ago
@diax-js/rendering-element v0.3.0
@diax-js/rendering-element
Base implementation of element that can render content.
How to use
Type in your console:
npm i @diax-js/rendering-element
Component definition:
1. Using Decorators:
import { RenderingElement } from '@diax-js/rendering-element'
import { html } from '@diax/rendering-element/uhtml';
import { signal, attribute } from '@diax/state';
import { attachListener } from '@diax/context/host';
@RenderingElement('my-element')
class MyRenderingElement {
static get observedAttributes() {
return ['data-nick'];
}
private name = signal('');
private nick = attribute('data-nick');
constructor() {
attachEventLister('dblclick', () => this.name.setValue('My Rendering Element'));
}
render() {
return html`${this.name.value} has nick ${this.nick.value}`
}
}
2. Plain JS:
import {getRenderingElementClass} from '@diax-js/rendering-element';
class MyFormElement {
... as above
}
const HTMLCtor = getRenderingElementClass(MyFormElement);
customElements.define('my-element', HTMLCtor);
Later in HTML:
<my-element data-nick="Signal"></my-element> // double click
...later
<my-element data-nick="Signal">
My Rendering Element has nick Signal
</my-element>