LEGO: Modern Web Components layer

LEGO (Light Embedded Gluten-free Objects) is a thin layer to build bricks for your browser that are easy to digest.

It comes along the WebComponentsJS polyfill to create more readable Web Components.

Create your element

Using render()

<my-component>Content of my component</my-component>
<script src=./src/lego.js></script>
<script>
  // Create your own class
  class MyComponent extends Component {
    render() {
      return `My component content: <slot></slot>!`
    }
  }
  // Enable <my-component> HTML element
  customElements.define('my-component', MyComponent)
</script>

Using <template>

<link rel=import href=./mycomponent.html>
<my-component>Content of my component</my-component>

mycomponent.html:

<template>
  My component content: <slot></slot>!
</template>

<script src=./src/lego.js></script>
<script>
  class MyComponent extends TemplateComponent {}
  customElements.define('my-component', MyComponent)
</script>

Not much happening, but you have a custom web component!

Just a thin layer

When extending Component, you basically add some shortcuts to native HTMLElement.

It's still fully compatible with native custom elements. No magic behind the scene, no complexity, just a couple of useful methods to write native web components easier.

It also enables the power of using <template> and <style> with imports. See the template with import demo.

Available methods

watch(): should return the array of names of attributes to watch for a change. When the attribute is changed, the component is re-rendered.

defaults(): should return an object with the name of the attributes and their matching default values. If the attribute is not declared, this value will be taken.

value(attributeName): a method to retrieve the attribute value. If the attribute has no value, the default value will be taken.

render(): should return a string which is the HTML content of the component. If <slot></slot> is in the string, it will be replaced by the children of your custom element.