Are web components “the future” for the web platform? There are many opinions both for and against. What is a fact, though, is that browser support is emerging for web components and there are a growing number of tools and resources for authors interested in creating and publishing web components of their own.
A great tool for creating web components is Vue.js, and it’s been made even easier with the release of Vue CLI 3 and the new @vue/web-component-wrapper library.
In this article, I’ll discuss the reasons why you might want to create web components and show you how you make your first one with nothing more than a basic knowledge of Vue.
What are web components?
You’re familiar, of course, with HTML elements like divs, spans, tables etc. Web components are custom HTML elements that can be used and reused in web apps and web pages.
For example, you might create a custom element called
video-player so you can provide a reusable video interface that has UI features beyond what’s available with the standard HTML 5
video element. This element could provide an attribute “src” for the video file and events like “play”, “pause” etc, to allow a consumer to programmatically control it:
<div> <video-player src="..." onpause="..."></video-player> </div>