Slim.js is a lightweight web component library that provides extended capabilities for components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the hassle of dependencies and an overhead of a framework.
npm install slim-js --save
bower install slimjsPlease note: Target browsers that do not support web component are required to use a polyfill like web-components
Slim.tag('my-custom-tagname', class extends Slim {
});Every slim.js component has it's own default template to be rendered upon placed on the DOM tree. This template is accessible via a template getter function.
Slim.tag('my-custom-tagname', class extends Slim {
get template() {
return '<div>Hello, slim.js!</div>';
}
});Usage of the element in another template or in a HTML wrapper:
<body>
<my-custom-tagname></my-custom-tagname>
</body>Slim.js supports one-way data binding to inner text, attributes, directly or via a parsing methods.
Text binding is used with the bind attribute
Slim.tag('my-greeter', class extends Slim {
get template() {
return '<span bind>Hello, [[person]]';
}
onBeforeUpdate() {
this.person = 'slim.js';
}
});Slim.js creates a runtime getter/setter function for the property greetee, and with every change the component will automatically render itself with the new result.
Attribute binding is done in a same manner, only the bind attribute is not required.
Slim.tag('my-custom-tag', class extends Slim {
get template() {
return '<my-greeter name="[[person]]"></my-greeter>'
}
onBeforeUpdate() {
this.person = 'John doe';
}
});You could wrap a binding with a parsing method, thus enforcing parser method to run every change in the property
Slim.tag('my-custom-tag', class extends Slim {
get template() {
return '<my-greeter name="[[toUpper(person)]]"></my-greeter>'
}
onBeforeUpdate() {
this.person = 'John doe';
}
toUpper(value) {
return value.toUpperCase();
}
});Slim.tag('my-custom-tag', class extends Slim {
get template() {
return '<div slim-if="myBoolean">Now you see me</div>';
}
onAfterUpdate() {
this.myBoolean = false; // now you don't
}
});