A zero knowledge curve, agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element and language standards.
-
👶 Simple If you know HTML, JS, and Template Literals then you know how to use X-Element
-
⛽ Agnostic Use XElement with any framework or library - Lit, Vue, React, Angular.
-
⚛ Reactive Efficient two way reactive databinding by default.
-
⚡ Fast Rendering is blazing fast, because XElement only interacts with the dynamic DOM Nodes.
-
📦 Small ~(15)KB minified.
-
🧭 Router Client side routing using the new Navigation API
https://xeaone.github.io/element/
import { component, html } from '/x-element.js';
export default class greet extends component {
greeting = 'Default Greeting';
greet = () => this.greeting = 'Updated Greeting';
render = () => html`
<h1>this.greeting</h1>
<button onclick=${this.greet}>Greet</button>
`;
}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.
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