Web Components are a new set of standards that are revolutionizing the way we build applications. Untangle the mystery behind this exciting technology with our very own Swaraj Banerjee.
Keep up with Swaraj in his previous video series on how to get started with Charles Web Debugging Proxy.
TRANSCRIPT:
Hi, my name is Swaraj. I am Engineering Director at Expect Labs, and today I want to talk to you guys about Web Components. So, if you haven’t heard, Web Components are a new technology being pushed by browser companies to make it easier for web developers to add different types of reusable components in web applications.
For Web Components, there are four basic components to them. The first part is HTML Imports. HTML Imports are the mechanism by which developers will actively be able to reuse and implement different Web Components from other people. HTML Imports work by adding a new attribute to the link tag, so what you’ll be able to do is use a <link rel=”import”>, and import another HTML file, and you can get someone else’s Web Component just like that. That will include JavaScript, HTML templates, and CSS as well.
The second part of Web Components is the Shadow DOM. Shadow DOM is basically a built-in feature of every browser, but what’s special about it is that it helps maintain CSS encapsulation. The reason that’s helpful is if another HTML Web Component is using the same CSS selector as the one you have on your web page, their CSS won’t clobber what’s going on on your page. So that’s really useful for using different Web Components from many different sources.
The third part of Web Components are Custom Templates. Currently there is a handful of HTML templating languages up there like handlebars, mustache, Angular has notion of these. There’s now going to be a new tag as part of the HTML spec called the template tag and this is a tag that will be across every browser, and is an attempt to unify all of these templating languages.
The last part of Web Components is the most interesting part, and it’s really the ability to create custom elements. Now instead of having to use a special third party library to declare your own type of element, whether it’ll be a map element, or a toolbar tab list, now as part of the actual browser spec you’re able to create new HTML tags.
With all four of these things together, we’re moving towards a more modular and componentized web application environment where you can use things that have already been written a million times before, things like a map component, things like a calendar component. All sorts of these things that people have written a million times, are now going to be much easier to implement in all of your web applications. So, that’s a brief overview on Web Components.