TL:DR; This is the multi-select-webcomponent this post is about. MIT license, feel free to do whatever you want with it.
Have you ever heard of WebComponents? This is a standard specification which all major browsers implement, and it allows for an application to provide its own html tags. Of course you can pack those tag definitions in modules, and here lies the beauty of WebComponents: standardized components that can be reutilized in any application, in any modern browser.
But are they that beautiful in the real world? I'll talk about some things I found out while developing my own WebComponent:
Shadow DOM
This is a feature of the specification that consists in encapsulating the component's DOM from the DOM where it is being included, so no styling rule applied to the component's parent will take effect in the component itself. It allows for your component to preserve its appearance and functionality regardless of whatever happens to the rest of the page.
The big problem I see here is that by doing this you are locking the style of your component, making it hard to fit in any application other than the one where the component was designed to fit.
When developing my component I chose to do not use Shadow DOM, ship it completely "naked" and give many tools for whoever is using the component to style it according to its own needs.
Templating
The specification allows for using chunks of HTML as the template for your components, but these chunks must be present at the DOM. If you are thinking about modularity and intend to use the component in many projects, you'll have to come up with a way of hacking into the DOM where the component is being inserted to add your own HTML to it, so you can retrieve it later to use inside the component.
This can lead to disaster, so I chose to do not use any templating and create all the component's structure in javascript, which isn't very nice. Maybe I can come up with a way to use string literals but that's for another update.
Modularity
You can create your components in UMD modules and ship them like that, but this would not allow for straightforward usage, so I chose to create an iife module everybody is more familiar with. This allows for anyone to just pick it up from a CDN and include in their page, or with a bit more knowledge add it to a SPA bundle (that's what I did in my project, using Gulp).
Summing Up
At the end I was very satisfied with the results. Even though the code has gotten a bit complex because of no templating, the component itself has got a lot of functionality and can be easily used in any other future application.
So, what do you think of WebComponents? Are you considering making one of your own after reading this? I hope so. ;)
Top comments (0)