Have you ever heard of web components? Maybe you have wondered how much effort is involved in creating one? Maybe you have made a web component but then wondered what is the point and have just gone back to using your favourite framework. In this blog post we will walk through the process of creating a simple web component. We will also introduce different techniques for creating web components and discuss cases where web components can be useful in modern web development.
An idea for building a web component
Browsing indiehackers.com one day, I came across an interesting interview with the creators of peakfeed.com — a social media dashboard. In the back of my mind I had wanted to start creating web components, especially now that they have more widespread support in modern web browsers. Seeing the PeakFeed widgets visualising various metrics from social media platforms gave me a good idea of something to build. In this blog post we’ll be creating a simple web component which allows us to show some statistic in the PeakFeed way.
Press enter or click to view image in full size
Intro to web components
Web components are a suite of technologies which when combined can allow us to create reusable components (bundles of HTML, CSS, JavaScript) for the web. Mainly, the technologies are the shadow DOM, <template> tag and…