elastomer

elastomer

A web-component library for commonjs based on rivet

Overview

ALPHA version - incomplete doc / incomplete tests

• Create web-components in commonjs
• Elastomer is like a light polymer + rivets

Getting Started

Install the module with: npm install elastomer --save

Getting Started

'use strict'
const elastomer = require('nova-elastomer')

require('nova-elastomer/webcomponents-lite.js') // Optional

class Foobar extends elastomer.HTMLElastomer {
  initialize (elasto) {
    elasto.html = `
    <h2>{{title}}</h2>
    <ul>
      <li nv-each-item="list">{{item.label}}</li>
    </ul>
    <content></content>`
    elasto.css = `:host {}`
  }

  link (scope, elasto) {
    scope.list = [
      { label: 'A' },
      { label: 'B' }
    ]
    elasto.mapAttribute('title')
  }
}

module.exports = elastomer('nova-foobar', { prototype: Foobar.prototype })

Now you can use the new <nova-foobar> tag

<div>
  <nova-foobar title="Hello world">
    <p>The future is now</p>
  </nova-foobar>
</div>

The pseudo-dom produced looks like:

<div>
  <nova-foobar title="Hello world">
    <h2>Hello world</h2>
    <ul>
      <li>A</li>
      <li>B</li>
    </ul>
    <p>The future is now</p>
  </nova-foobar>
</div>

License: MIT