Well! they say “Experience is the mother of wisdom”, therefore, I being a recent addition to The (with a two-month exposure) would like to walk you through the nuts and bolts of Polymer. Polymer Fandom So, without any Mumbo Jumbo talk, let’s begin with the basic definition of Polymer! What is Polymer? Polymer is a JavaScript library used for creating web applications using Web Components. mkk Now, you can think of Web Components as reusable elements that can be used in web pages or web apps. That means you can also use it with other JavaScript libraries. Polymer is like a “lego block” which can be used to build anything, almost anything. Why Polymer? Suppose you want to make a study table for yourself. Here’s what you’ll do: Take a log of wood cut into pieces according to your requirement, construct the table top and legs, flatten the pieces and join them all. Quite a long process, no? How about you just get the pieces and assemble the table? Super simple. That’s how polymer works. You want to use some component, import it and use it, you don’t need to know how it works. You want to use it with Angular, React or Vue or some other JS library, just import it and use it. 4 main features of Web Components It makes easier to import HTML documents. Similar to importing CSS documents. HTML Imports: It helps developers to create their own elements. Custom Elements: It holds the content that is not to be rendered when a page is loaded but may be instantiated during runtime using JavaScript. In simple words, it contains HTML tags that is not rendered when a page is loaded but can be rendered later using JavaScript. HTML Template: Shadow DOM? What is it? I’ve just heard about the DOM.Shadow DOM inserts a new node to the DOM called shadow root and creates a boundary between the DOM and shadow root, so that the element(Web Component) inside the root remains modular and separated from the main DOM. Didn’t understand yet? No worries. I’ll explain it below. Shadow DOM: How to use Polymer? Make sure to install Node.js, npm, Git, Bower and Polymer CLI. You can follow the set up guide on the . Polymer website Now, let’s get into some code. Here’s the of what we’re gonna make. live demo <link rel="import" href="../polymer/polymer-element.html"><link rel="import" href="../paper-input/paper-input.html"> The is an HTML import. This imports polymer library and a custom element named paper-input. link rel="import” <dom-module id="basic-example"> The wraps the custom element which includes the styling, scripting and markup of custom element. The attribute is used to include the element into the main document tree. <dom-module> id defines the structure and styling of the element. <template> The inside the defines the styling for the element. styling <template> The is a one-way bind. It’ll display whatever will be the value of ‘name’ property. [[name]] is a custom element which is basically a text-field. is two-way binding which means if we type something in the input, it’ll immediately reflect in the ‘name’ property and change the value of the ‘name’ to whatever value is typed. <paper-input> {{name}} <script>class BasicExample extends Polymer.Element{static get is(){return 'basic-example';}static get properties(){return{name: {type: String,value: ""}}}}customElements.define(BasicExample.is,BasicExample);</script> This is ES6 class syntax inside tag. <script> gives element a name, so that the browser can recognize it when we use it in tags. This name must match the given in the element's template definition . static get is(){return ‘basic-example';} id <dom-module id="basic-example"> here the custom element API calls the method to register the element named whose class name is . customElements.define(BasicExample.is,BasicExample); define basic-example BasicExample Now, our custom element is ready to be used anywhere. All you need to do is import this custom element in the file in which you want to use this element and that’s all. For instance if you want to use this element in the file named , then you’ll import it and use it as follows: index.html <link rel="import" href="path-to-element/basic-example.html"> <basic-example></basic-example> Back to Shadow DOM It’s completely fine if you didn’t yet understand what Shadow DOM is. It took me a lot of time to understand what Shadow DOM is. Let me explain this with help of an example. Suppose you made a custom element without Shadow DOM with some nice CSS. And some other developer wants to use your element in his/her web applications. If the styling class of his/her applications matches with the ones in your web component then it’ll override the styling in your element. That’s really bad, no one wants that. Why would any developer on earth import web component and then spend his/her time improving it’s styling? And that’s the main reason to use Shadow DOM. In other words it the styling, scripting and structure of custom elements. To make things even more clear I added the picture below. encapsulates Here’s a screenshot from the Polymer website. is some component, all it’s styling, structure and scripting is inside the shadow root. pw-shell What’s next for Polymer? Last week in the Polymer Summit the following things were announced: Polymer 3.0 announced. Use of NPM and yarn, which means no more bower. Use of ES6 modules, which means no more . <link rel="import"> An easy migration for migrating code from Polymer 2.0 to 3.0. tool The new is the biggest project till now developed using Polymer. YouTube By now, you would have at least got an idea about Polymer and how it works. So, give it try and build you own custom elements. here **Thanks for reading this article. Please hit the button if you like it.**Connect with me on .Follow me on and . Clap LinkedIn Twitter Quora
