abstract-element
v4.8.0
Published
The abstract class for creating web components
Downloads
36
Readme
abstract-element
AbstractElement aims for creating Web components identically independent from a render engines. This project has an abstract class and a set of basic methods for developing Web components using various render engines.
+---------------------------------------+
| |
| AbstractElement + render-function |
| |
+---------------------------------------+
| | |
| Web components | Renders |
+---------------------------------------+
| | |
| Custom Elements | lit-html |
| | |
| Shadow DOM | hyperHTML |
| | |
| ES Modules | ... |
| | |
| HTML Template | |
| | |
+---------------------------------------+Getting started
Add abstract-element to your project:
npm i abstract-elementInstall a render engine*.
Create an element by extending AbstractElement and calling
customElements.definewith your class or use@Definedirective if you use TypeScript.
import { Define, AbstractElement, attr, state } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
import { html } from 'lit-html';
/**
* The demo web component with lit-html render engine
*/
@Define('demo-lit-component')
export class DemoLitComponent extends AbstractElement {
@attr('data-demo')
dataDemo;
@state()
time = new Date().toLocaleTimeString();
constructor() {
super(litRender, true);
// update the time each second
setInterval(() => {
this.time = new Date().toLocaleTimeString();
}, 1000);
}
render() {
return html`
<section>
<p>${this.attr[DemoLitComponent.attributes.dataDemo]}</p>
<div>${this.time}</div>
</section>
`;
}
}- Use the Web component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Demo</title>
</head>
<body>
<script src="index.js"></script>
<demo-lit-component data-demo="Current time is rendering with lit-html:"></demo-lit-component>
</body>
</html>- See the demo files for more examples.