Custom Elements Benchmark

What and Why?

As the web progress into a modular component based design, custom elements/web components become inseparable part of it. Many libraries and frameworks offer very strong wrappers around this technology to ease and simplify the process.

This project implement the same custom element with every framework/library, showing the differences. I tried to polyfill at the top level(this page) for every possible scenario. Every card hold some benchmark information about the custom element and the Placeholdered image created with that library/framework.

Vanilla

Bundle Size

4.62KB

Compatibility

Pro's:

Small bundle size
Easy to use for small elements

Con's:

Documentation still lacks a lot
Unusable for heavy elements

Documentation

Angular Elements

Bundle Size

283KB

Compatibility

Pro's

Great for UI Libraries
Works well for complex elements

Con's

Gigantic bundle size!
Documentation still lacks a lot

Documentation

Vue Web Compoenents Wrapper

Bundle Size

8.45KB

Compatibility

Pro's

Great for UI Libraries
Works well for complex elements

Con's

Must include Vue!
Documentation still lacks a lot
Incompatible with IE11

Documentation

Lit-Html By Polymer

Bundle Size

45.2KB

Compatibility

Pro's

Similar to native implementation
Templating done in a smart and intuitive way

Con's

Hard to configure the bundling process
Documentation still lacks a lot

Documentation

Stencil

Bundle Size

86.6KB (With Polyfills)

Compatibility

Pro's

Great documentation
Lazy loading mechanism exist by default
Comes with polyfills for all browsers

Con's

Hard to configure the bundling process and even then bundles into multiple folders
No option to remove/disable the lazy loading mechanism

Documentation

Svelte

Bundle Size

3.91KB

Compatibility

Pro's

Great documentation
Small bundle size

Con's

Incompatible with IE11
Small community

Documentation

Future Tasks

Add unit testing for each element.
Create elements with other frameworks/lib's (react might be a good place to start)
Enhance the build process and webpack configuration.

Contributing

Each element is built in a seperate package inside the `packages` with his own build/test/dev scripts that can be found in the package.json file.
At the root level there is a script that run all the build scripts and collect all the bundled element files to import them at the index.html scripts array at the end of the file.
Adding new elements is the best way to contribute to the project and ofcourse improving existing code (eg. trying to make a bundled file from stencil because at the moment it exports an entire folder).