binding for custom elements.

demo

This is an experimental library that provides data binding support for vanilla v1 custom elements

This means that you can write your custom elements as close to the standard, bindi just saves you some boilerplating.

At this time the lib is just an experiment. This is not for use in a real project.

Because the custom element v1 spec is pretty good and the only thing that was preventing me from using without any frameworks was the lack of data binding.

So I thought 'if i could allow a way for data-binding to be defined, then convert that to logic belonging to the custom element that'd be great'.

Because polymer makes heavy use of html imports, which is unlikely to become a standard.

bindi exposes a method prepare that takes markup like:

<div>[[name]]</div>

and returns an object: {markup:string, bind: (el:HTMLElement) => void}. the markup looks like:

<div><span bindi-id="0"></span></div>

you then call bind with your custom element: bind(this), this will add a setter for name to your custom element, such that whenever it's set it'll update [bindi-id="0"] with the value.

import {prepare} from 'bindi';

const binding = prepare(`<div>[[name]]</div>`);

class MyEl extends HTMLElement{
  constructor(){
    super();
    const sr = this.attachShadow({mode: 'open'});
    sr.innerHTML = binding.markup;
    binding.bind(this);
  }
}
customElements.define('my-el', MyEl);

document.querySelector('my-el').name = 'Ed'; //my-el will now contain 'Ed'.

The binding definitions are trying to follow polymer syntax as much as possible.

npm install

The demo shows a few elements working together with changes travelling up and down the dom hierarchy.

cd demo
../node_modules/.bin/webpack-dev-server --hot --inline
# go to http://localhost:8080

• single prop expression: {{foo}}
• custom event names: x="{{foo::input}}"
• nested prop expression: {{foo.bar}}
• on-click="xxxxx" - just to get an idea of how to handle events.

• computed expressions? no
• attribute bindings? no

• arrays? see dom-repeat in demo as a rough guess on how to achieve this.

Uses polymer convention of adding an event listener for a binding so: <el foo="{{bar}}"> adds:

el.addEventListener('foo-changed', () => {
  this.bar = el.foo;
});