Probably by now, you have heard of Web Components. Web Components are comprised of four different specifications ( Custom Elements, Templates, Shadow DOM and HTML imports). It’s a neat placed package of web technologies.
The goal of Web Components, is to organize and standardize best practices for web technologies. We all have seen or experienced how polluted a project can get when we start adding dependencies to it.
A Web Component is meant to keep things organized, to not conflict with the existing DOM and reduce the amount spent learning the code or API.
Some ideas of where Web Components would work:
- Photo Carousel –
<photo-carousel src="['pic1.jpg', 'pic2.jpg']"></photo-carousel>
- Twitter Profile Card –
<twitter-profile-card user="omar12" tweets="5"></twitter-profile-card>
- Stripe Payment Form –
- Disqus Comments –
- Video Player –
SaaS companies can provide inhouse Web Components to their customers and have it running in no time.
How to work with Web Components using Polymer
We will download Polymer using Bower. If you haven’t heard of Bower, it’s basically a package manager for project dependencies. Find out more about Bower here.
1 2 3
Read more about the installation here.
2.We add the following in the
<head> of where you will include your Web Component.
1 2 3 4 5 6 7
The 2 things to notice, is that we need to include the Polymer Polyfill.
3.Build your Polymer element.
Create an html file in the web-component folder.
1 2 3 4 5 6 7 8 9 10
You can include Custom Elements on other Custom Elements (cue Xhibit meme).
1 2 3 4 5 6 7 8 9 10 11 12
Of course, the above is not a practical example, but something to manipulate or read data.
Right now, Web Components are partially supported on Chrome/Opera (Blink) and Firefox. No support on Safari or IE.
Keep an eye on it, Google and Mozilla are spending good amounts of energy behind Web Components, we can only hope more adoption of the technologies.