Awesome

Ripple | Features

Extends the rendering pipeline to enhance a component with other features (mixins).

Extend components with features

<custom-form is="validatable">

Features are just components, and will be invoked on the element during a render in the same way as the base component. The base component will be invoked first and then any features specified (you can specify multiple features).

ripple('base-component', function(){ this.innerHTML = 'foo' } )
ripple('feature', function(){ this.innerHTML += 'bar' } )

<base-component is="feature">foobar<base-component>

This pattern is the same as:

d3.select(element)
  .call(component)
  .call(feature1)
  .call(feature2)
  .call(feature3)

Features may also contribute and mixin their own styles (just extend css attribute).