0.3.6 • Published 4 years ago
base-webcomponent v0.3.6
Base WebComponent
How To Use BaseWebComponent
Install the module via npm i base-webcomponent
and consume it as such:
import BaseWebComponent, { html } from "base-webcomponent";
Alternatively you can use a CDN such as unpkg:
import BaseWebComponent, { html } from "https://unpkg.com/base-webcomponent";
Example
import BaseWebComponent, { html } from "base-webcomponent";
export default class ExampleClass extends BaseWebComponent {
static get props() {
return { startFrom: 0 };
}
static get state() {
return { number: 0 };
}
onMount() {
console.log("Mounted");
this.setState({ number: this.props.startFrom });
}
onAttributeChanged(oldProps, newProps) {
console.log(oldProps, newProps);
}
onUnmount() {
console.log("Unmounted");
}
updateNumber() {
if (this.state.number === 10) {
this.remove();
} else {
this.setState({ number: this.state.number + 1 });
}
}
render() {
return html`
Started from ${this.props.startFrom} <br />
<button onclick=${() => this.updateNumber()}>
Clicked ${this.state.number} times
</button>
`;
}
}
window.customElements.define("x-exampleclass", ExampleClass);
Thanks to
Rendering methods of lighterhtml
0.3.6
4 years ago
0.3.5
4 years ago
0.3.4
4 years ago
0.3.0
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.13
4 years ago
0.0.11
4 years ago
0.0.12
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.5
4 years ago
0.0.6
4 years ago
0.0.4
4 years ago