Custom elements are a great way to add some custom behaviour to dom elements, in a reusable and modular manner. GREMLIN.JS offers a simple interface to create and describe these custom elements.
Currently, GREMLIN.JS uses the Custom Elements V0 spec. It's planned to add support for the V1 version of the custom elements in the future.
Creating custom elements with
is supported in modern Chrome, Firefox and Opera. For older browser there exists a small
polyfill, that's already included in GREMLIN.JS. If you
need support for IE8, you'll have to include another script available at the
You can use the barebones GREMLIN.JS library, too, if you want to bring your own polyfill or prefer to live on the cutting edge.
lib/native.js instead to omit the polyfill.
Every gremlin component is described with a component specification, an object
literal providing methods, properties and an optional constructor function
You'll add the spec to GREMLIN.JS by calling the
|on or more mixins to use with this component
|called for all elements after they were created
|called for all elements after they were added to the dom
|called for all elements after they were removed from the dom
|called for all elements if a one of the element's attributes was changed
Additionally, every gremlin provides a reference to the actual dom element with
import gremlins from 'gremlins';
import gremlinsJquery from 'gremlins-jquery';
console.log('a new foo is in town!', this.el);
The custom element
When you created a spec, you can use the corresponding custom element to add gremlin components to your site. In fact, it does not matter if you create the spec first, specs can be added after the element exists in the dom.
The custom element's (tag) name is created with the tag name you provide when creating the gremlin.
would be used for all
The custom element type identifies a custom element interface and is a sequence of characters that must match the NCName production, must contain a U+002D HYPHEN-MINUS character, and must not contain any uppercase ASCII letters. The custom element type must not be one of the following values:
<foo-bar /> or
throws an exception:
<foo_bar /> or