Create a Custom Element using Polymer
In this lesson we'll install Polymer using bower and explore creating our first custom element. We will use the dom-module to create our first Element and add an event listener to watch for the keyup event.
[00:00] To get started with Polymer, we could simply use bower to install Polymer. Once that's in place, we're going to see we have two packages in our Bower Components folder. One of them is the Polymer library and the other one is Webcomponents.js.
[00:15] Webcomponents.js is also written by the Polymer authors and it's simply the polyfills to create Web components. Now that we've got that installed we're going to go ahead and create new index.html file here called, "Hello."
[00:33] We're going to bring in a couple things. The first one is going to be a script from the Webcomponents.js library. That's going to be Webcomponentslate.js. We're going to do an html import. It's like a CSS import except the rel on this is "import."
[00:48] Then, we're going to pass in html files. We're going to get that from Polymer. That's going to be Polymer.html. We're going to create one more import here for a component we're going to create. We'll call that HelloWorld.html. We're going to end up creating a tag for that. Hello World will be our tag.
[01:06] Save that. Then, we're going to create that html for Hello World. So HelloWorld.html and now we're going to go ahead and create our actual custom Polymer element. That's always going to start with a tag called, "dom-module." That's our outermost tag.
[01:23] The next thing we're going to have is a template tag. Then, after that, we're going to have a script tag. Here, in our dom-module, we're going to add an ID that matches our tag. It's going to be hello-world. Now, when we get into our script, we're going to call Polymer. We're going to pass that an object. There's a lot we can do here. The single requirement is this string called, "is" and then, again, a string that matches our tag.
[01:52] Now, here inside this template, we're creating what's called the local DOM. This is the part that's going to be visible to the end user. I'm going to say, "Hello user." Save that. On the right, we have our component.
[02:06] Now, there's a ton of things we can do here. Since we're just getting started, I'm going to go ahead and give this an attribute of name. I'm going to pass in Joe. We're going to jump over to our component here, or element I should say.
[02:17] I'm going to use the one-way data binding syntax. That's the regular brackets, double brackets around our variable. I'm going to save that. You can see on the right that we are now consuming that variable. Very easy.
[02:29] One of the great things about Polymer is that since we're just creating Web components, we can interact with them as though they were just any other element in the DOM. I've created an input here. I'm giving that an ID of INP. I'm going to give my hello world here an ID of H.
[02:47] Now, right here, in regular JavaScript right in the browser, I'm going to say INP. I'm going to add an event list here and there of key up and a function here. Then, I'm going to say h.name is equal to this.value.
[03:06] If you're not familiar with doing INP like this, it's just a shortcut to document.getElementById. Then, we save that. Now, we've got this input up here. We've got essentially what looks like two-way data binding.
[03:23] Since it's just a regular DOM element, we're simply updating that attribute of name. Everything this being reflected just like if we were working with a regular div or some other type of input. Very easy.
[03:36] Of course, we could build that into our component if we wanted to. Let me clear this out one more time. We'll jump over to our components. We'll create an input here. I'm going to take its value. I'm going ramp that in double curly brackets which is the syntax for two-way data binding in Polymer. I'm going to pass in our variable of name.
[03:58] We can use this double colon syntax. We'll talk more about that. In Polymer, this is how we two-way data bind with a native element. I'm going to say on the key up of that. I'm going to save this. We'll jump over here to the browser and we can see that our name attribute is there in the value of the input. If we change that, in each key up, it's updating our template.