Element.js Deep Dive Demo

A comprehensive showcase of the Element.js library features.

1. Core: `el.create` and `el.init`

Creating elements with various properties and rendering them.

2. Rendering Engine: `el.render`

Using the core `render` method for fine-grained DOM placement.

  • Initial Item

3. Direct DOM Access: `ref` and `assign` props

Getting a direct reference to a DOM node after it's created.

4. Sanitization Showcase

Demonstrating the default-on security feature.

5. Object-Driven DOM: `buildFromObject`

Building a DOM tree from a JS object and merging content.

6. Advanced Web Component

A stateful Web Component created with `el.customElements.register`.

The component below is a fully standard Web Component: