 Hey there, polycasters. I'm Elliot. Welcome back to our series on building an element in Polymer 2. In the last video, we mocked up a simple checklist. Now we want to clean it up and make it look production ready. Luckily, the Polymer team creates a catalog of elements called the paper elements, which are based off of the material design spec. Let's take a look. There's a website called webcomponents.org. And here it has a catalog of all types of web components that people use. For an example, we can look up paper input. All right, so here we have the paper input element. The paper input element has a lot of nice things on it. It has a demo where you can change a bunch of things. Like here, you can change the email to change it over to Gmail. And you see it changes right there. Cool, so I want to use this element. And the way you can use it is by going to this section right here, and you'll see a download feature. If you click on this, it'll copy it to your clipboard. You just go over to your terminal. Let's create a new tab here. Just make sure we're in the right directory. Yes, from the Polycast Checklist directory. And just paste in the command. So this is going to install the paper input element as a dependency. So if you look over here, back in the Bower Components directory, where it installs all of our dependencies, you'll see paper input show up. And then again, in the bower.json, which is the configuration file for Bower, you'll see that our dependency now includes paper input. All right, so now let's go use it. So Polycast Checklist, let's go into the paper input directory. And within there is the paper input dot HTML that you can see right here. And so let's type that right in, paper dash input HTML. And it found it. I also know that we want to replace the button and the check box. And I know for a fact that we also have paper button and paper checkbox. Let's do the same thing for paper checkbox. Copy that. Go to the download over here. Paste it into our terminal. Go back. Find paper button. Copy this right here. Go right over to their terminal, paste it in, and install. All right, so now let's import the other two. We have paper input. Then we have paper checkbox. And then we have paper button. So here we have our checkbox. Let's replace it with the paper checkbox. And we don't need that anymore. And this input, let's replace it with a paper input. And we don't need this anymore. Now let's fix the button to a paper button. Cool. All right, we got that going. Let's go refresh the page, see what we got. Nice, looking a little bit better. It's not really styled up nicely, but we can fix that. And here's a button down here. All right, we'll go back and start doing styling. So here you can just make a style tag within the template. And here we will add a class to this div and call this a task. And in the style, we'll select that task. And then we can add styling to the task. You'll notice here that I just called it task. This isn't something you'd typically do in a normal HTML or in CSS project because task is such a common name. And you can be using it all around. And I don't know about you, but I've always had a lot of issues where my CSS is just coloring everything all over the place and restyling everything. Luckily, Polymer uses web components. Web components have a spec called shadow DOM. And shadow DOM encapsulates your CSS only into that node. So you can call task. And you can call anything else outside of the element, class equals task. And it won't get styled by this rule that we're making right here. All right, so let's actually start styling. So here, we'll make this a flex box, display flex. And we will align the items. So vertically, we'll align them straight across through the center. And this will be the center. And then let's style the paper input onto the same line as the checkbox. Because as you see, they're on different lines. And that doesn't look really nice. So to do that, we can do display inline block. Simple as that. All right, let's give it a quick refresh. Ooh, something's wrong. Oh, I don't need these right here. There you go, it's a bit more centered. But it still looks a bit weird to me. Let's take a look. Let's add a label to this paper input. Label, we'll call this task name and see where that shows up. So there you go. You can see that the task name right here is actually causing the display jank, where the checkbox actually is centered, but it's only centered to the entire thing. So we can remove that by doing no label float. So paper input has a thing where it allows you to remove the label after you start typing. So we'll set that to true, refresh. There you go. And when you backspace, there's task name. Looks really nice. So this is looking very good. We have our repeating elements. And our to-do section looks almost complete, except we can't really add tasks to our task list. But we'll get to that in the next video, where we'll start adding some logic to our element so the checklist actually works.