Provide a knowledge transferable future proof, reactive data binding, library for building web interfaces.
-
👶 Simple If you know HTML, JS, and Template Literals then you know XElement.
-
⛽ Agnostic Use XElement with any framework or library - Lit, Vue, React, Angular..
-
âš› Reactive Performant and efficient two way reactive data binding.
-
âš¡ Fast Rendering is blazing fast, because XElement only interacts with the dynamic DOM Nodes..
https://xeaone.github.io/element/
import { html } from 'https://esm.sh/@xeaone/element/module/index.js';
let count = 0;
export default () => html`
<strong>${() => `Hello World ${count}`}</strong>
<button onclick=${() => count++}>Greet</button>
`(document.body);import { html } from 'https://esm.sh/@xeaone/element/module/index.js';
const {html} = await import('https://esm.sh/@xeaone/element/module/index.js')
export default class extends HTMLElement {
#root = this.attachShadow({ mode: "open" });
#count = 0;
#render = () => html`
<strong>${() => `Hello World ${this.#count}`}</strong>
<button onclick=${() => this.#count++}>Greet</button>
`(this.#root);
constructor() {
super();
this.#render();
}
}The two directories to use are module and bundle. Bundle includes ESNext and ES2015 js bundles. Module contains ESM files with .js, .ts, and .d.ts.
npm install @xeaone/element
https://www.npmjs.com/package/@xeaone/element
https://esm.sh/@xeaone/element/module/index.ts https://esm.sh/@xeaone/element/module/index.js
https://cdn.jsdelivr.net/gh/xeaone/element/module/index.ts https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js
This project is licensed under the MPL-2.0 License
