Hello, slim.js

Slim is an elegant library for web components

Slim.js is a lightning fast library for development of native web-components. No black magic. It uses javascript's inheritance mechanism to boost up HTML elements with superpowers.

Is this another framework

No! It's a slim code layer that adds superpowers to HTML elements using it's native class inheritance.

Guide

Read the guide

Component's Lifecycle

The lifecycle containes the following abstract hooks

• onBeforeCreated()
• onCreated()
• onBeforeRender()
• onAfterRender()
• onBeforeUpdate()
• onAfterUpdate()

also attachment and detachment from the DOM tree invokes

• onAdded()
• onRemoved()

native attributeChangedCallback is also supported.

This is the component's full lifecycle:

• element declared on the DOM
• Initialization
• onBeforeCreated()*
• element creation + data binding
• onCreated()*
• onBeforeRender()*
• element renders
• render
• onAfterRender()*
• onBeforeUpdate()*
• update()
• onAfterUpdate()*

* empty methods that can be implemented when inheriting a slim element.

Standards compilant

• es6
• no transpiling or compilation required

Tools free

• add Slim.js to your project and your'e good to go

Examples

• Creating a reusable component
• Developer's Guide