Start in 10 minutes with a 3KB library

  1. <script src="https://cdn.jsdelivr.net/gh/cloudouble/element@1.7.5/element.min.js"></script>
  2. window.LiveElement.Element.load().then(() => { do stuff... })
  3. Learn everything at https://github.com/Cloudouble/element (9 minute read)

Intuitively Define Your OWn Custom Elements

  1. Create a directory called 'elements' to put your custom element .html files in
  2. Create a index.json file with a load list of your custom element names
  3. Create a .html file like link.html below for each custom element, inherit everything! This example inherits from symbol.html.
<style>
:host {
    cursor: pointer;
    position: relative;
}
::slotted(element-icon) {
    float: right;
    position: relative;
}
</style>
<template>
    <a><slot></slot></a>
</template>
<script>
    /* global */
    class Link extends window.LiveElement.Element.elements.Symbol {
        
        constructor() {
            super()
        }
        
        connectedCallback() {
            this.addEventListener('click', event => {
                if (this.href) {
                    this.target ? window.open(this.href, this.target) : window.location = this.href
                }
            })
        }

        static get observedAttributes() {
            return (super.observedAttributes || []).concat('href', 'target')
        }

        href($this, value) {
            return value || ($this.name ? `#${$this.name}` : '') || ''
        }

    }
</script>
										

Customise Everything!

The tools are there for you to:

  • control exactly how custom elements are loaded (including from multiple sources)
  • inherit CSS styles from parent elements
  • inherit and remix HTML templates from parent elements
  • create complex custom HTML elements of any level to use as templates for other elements which you can then include in your apps with one tag
  • include external Javascript or CSS dependencies on the fly
  • build a defined set of elements to load in one network request for product apps
See the full documentation over at https://github.com/Cloudouble/element to learn everything.

You Don't Need Another Framework

Forget complex Javascript frameworks and just learn and use native Javascript properly. Learn more over at https://developer.mozilla.org/en-US/docs/Web/JavaScript