el-elemento

simplified syntax for creating lightweight custom elements

• based on webcomponents.js polyfill
• inspired by skatejs clean api aesthetics
• encourages authoring es6 web components
• further encourages publishing web components to npm as es5 modules

install

npm i el-elemento --save

usage

while not required, el-elemento looks great as es6 src

// index.es6.js
import el from 'el-elemento'
 
let hello = el({
  tag:'elx-hello', 
  created() {
    this.innerHTML = 'hello world'
  }
})
 
document.body.appendChild(title)
 

renders this markup:

<elx-hello>hello world</elx-hello>

Check out /components for more examples.

exending

 
import el from 'el-elemento'
 
let IconLink = el({
 
  tag:'elx-icon-link',
 
  extends:'a'
})
 
let homePage = new IconLink
hompage.href = 'http://brian.io'
homepage.innerText = 'homepage

renders the following markup

<a is=elx-icon-link href=http://brian.io>homepage</a>