From the course: Learning Polymer

Web components - Polymer Tutorial

From the course: Learning Polymer

Start my 1-month free trial

Web components

- The Polymer library makes it really easy to both create and consume web components in your web applications. So, before we start working with Polymer directly, let's take a few moments to understand what web components are and why they are so important. So, as a web developer, you've probably noticed the sheer number of web frameworks that exist today. And it probably feels to you like a new one comes along every six to twelve months or so. I mean think about how many are out there: Ember, Backbone, Angular, Knockout, React, the list just goes on and on. In fact, you've probably worked with one of more of these. Now each of these frameworks has a variety of features but one of the common threads that runs through all of them is the notion of components. Components promote two very important concepts. The first is encapsulation and the second is reuse. Encapsulation means that properties of a component, its style, logical behavior, and other content, are scoped to the component itself and don't affect other parts of the app or the page. Reuse is very important in building modern web apps. It means that you should be able to use the component in other apps regardless of how you built it. Now in some frameworks that's pretty hard so for example you can't just reuse a React component in say an Angular project without bringing in all the rest of React into that project. Web components are fundamentally different. They are built using HTML standards that have either been adopted by the major browsers or have polyfills available for browsers where support isn't yet implemented. Now there are four web standards that comprise web components. The first is HTML imports which provides a way to separate the code for your components into individual files to promote reuse. You simply import the components you want to use with the link tag that you're already familiar with. HTML templates give you the ability to define templates in your HTML code using the browser native template tag. Yep, that's right. You no longer have to use a separate library just to create templates. Next is custom elements which allow the creation of new HTML elements that can have their own JavaScript API, including properties that can be set using regular HTML attributes. And, finally, there's Shadow DOM which is used to give your web components a structure that the browser can understand and use when laying out a webpage. Shadow DOM also provides the important piece of encapsulation which insures that the styles and logic that you use in your component only affect that component and not the rest of the page. Now, it's beyond the scope of this title to go deeply into how each of these individual technologies work and for the rest of this course you won't need to have a detailed understanding of these technologies. I'll go over each of them as we come to them in the course. However, I highly suggest that you spend some time learning about them if you haven't already. If you want to learn more about these underlying technologies of web components, take a look at my course "Learning Web Components." So that's a brief summary of what web components are and in the next video we'll see how Polymer fits into the web component ecosystem.

Contents