X-Element

X-Element’s vision is to provide an agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element standards.

Features

• 👶 Simple to learn if you know custom elements you know X-Element.

• 📦 Shareable A single class to build a single component or an entire app.

• ⚡ Fast Tiny footprint ~15KB (minified and compressed).

• 🏗 Framework Agnostic Use X-Element with any framework - React, Vue, Angular…

Learn

https://xeaone.github.io/element/

Example

import XElement from '/x-element.js';

MyElement extends XElement {

    greeting: '',
    greet () { this.greeting = 'Greeting'; }

    constructor () {
        super();
        this.greeting = 'Hello World';
        this.shadowRoot.innerHTML = `
            <h1>{{title}}</h1>
            <button onclick="{{greet()}}">Greet</button>;
        `;
    }

}

MyElement.define();

Use

https://esm.sh/@xeaone/element

https://cdn.jsdelivr.net/gh/xeaone/element/pro/index.js

https://cdn.jsdelivr.net/npm/@xeaone/element/pro/index.js/+esm

https://www.npmjs.com/package/@xeaone/element

Originally called Oxe and still available on the oxe branch

Author

xeaone

License

Why You Should Choose MPL-2.0 This project is licensed under the MPL-2.0 License