Creating a Multiselect Component as a Web Component
Web applications become every day more complicated and require a lot of markup, scripts and styling. To manage and maintain hundred kilobytes of HTML, JS, and CSS we try to split our application into reusable components. We try hard to encapsulate components and prevent styles clashing and scripts interference.
In the end a component source code is distributed between several files: markup file, script file, and a stylesheet. Another issue we might encounter is having long markup cluttered with divs and spans. This kind of code is weakly-expressive and also hardly maintainable. To address and try to solve all these issues, W3C has introduced Web Components.
In this article I’m going to explain what Web Components are and how you can build one by yourself.
Meet Web Components
Web Components solve all these issues discussed in the introduction. Using Web Components we can link a single HTML file containing the implementation of a component and use it on the page with a custom HTML element. They simplify the creation of components, strengthen encapsulation, and make markup more expressive.
Web Components are defined with a suite of specifications:
- Custom Elements: allow to register a custom meaningful HTML element for a component
- HTML Templates: define the markup of the component
- Shadow DOM: encapsulates internals of the component and hides it from the page where it’s used
- HTML Imports: provides the ability to include the component to the target page.
Having describe what Web Components are, let’s have a look at then in action.
Continue reading %Creating a Multiselect Component as a Web Component%
LEAVE A REPLY
You must be logged in to post a comment.