Style Custom Elements in Polymer

[00:00] Hey, guys, in this video, we're going to take a look at styling our custom polymer elements. To do that, I've got this little business card-looking thing. We're going to turn that thing into a polymer element.

[00:13] You can see here in HTML, I've got all the style and the markup in line. What I'm going to do is start off by creating a file for element. It will be businesscard.html. We'll go ahead and setup our dom-module with an ID of business card as well as an ease value of business card.

[00:35] Over here, we're going to go out and grab our very simple markup. Drop that right inside of our template. Then, we're also going to grab the entire style tag and its contents. We're going to drop that right here at the end of our template.

[00:55] Now, you can place your style tag at the beginning or the end of your template tag. I like to do it at the end but that's just a preference. However, it is recommended that you have your style inside of your template tag. We're going to save that. Over here, we're going to do an HTML import of businesscard.hmtl. We'll drop our tag in the page. There is our polymer element.

[01:23] Now that our style is in our component, we can go ahead and utilize polymer to make a couple enhancements. Here, I had been scoping everything inside of this div with a class of card. Again, in order to isolate the scope of the H1, H2, and H3 stylings, we can actually get rid of that and just use our parent component or in the CSS here, we can access that with colon host. We'll copy that and replace that card, that specific class wherever we're actually styling the root element.

[02:01] Down here where we were scoping on the H1, H2, and H3 stylings to the class of card, we can go ahead and strip that out all the way across. You can see now that I'm actually styling the H1, H2, and H3 directly. If I save that, everything is working exactly as we would expect.

[02:20] Just to illustrate what's going on here, I'll drop H1 here and H2 here and H3 here. Save that. We can see that the H1, the H2, and the H3 that are outside of our element are not affected by the styling that we've done inside of our elements. That's fully isolated from the rest of the document.

[02:45] Another thing we can tap into in polymer styles is CSS variables. Here, I've got a host selector. I'm going to create a variable with a double tack. I'm going to say, "card color." I'm going to set that to my background value. Then, here in our background, as well as in our shadow, I'm going to use var which is a function and it just takes in the variable that we want to use. This will be card color.

[03:17] We're going to create one more for text color. We'll drop that right here. Var, double tack, text color. Save that. Everything looks as it should.

[03:36] Now, we can come up here and theme our card. Let's say I wanted to have a background of green and a text color of white. Now, we've got that. I'm going to change this to blue. That's working just fine. I'm going to go ahead and put that back to what I want the defaults to be.

[03:58] What I'm going to do for another user consumer of this component is that I'm going to create a second variable that the consumer of this element could tap into. Here, I'm going to call it, "custom card color." The way this works is the variable function will take in custom card color if it exists. Otherwise, it will default to my card color variable. We'll do that down here with custom text color. Save that. Now, everything is going to work just as we expected.

[04:31] What I'm going to do is create a new element on my card.html. We'll go ahead and setup our ID, as well as our is value. Then here at the beginning right outside of our dom-module, we are going to go ahead and HTML import business card.

[04:54] Then here in our template, we'll output business card. Then, we'll have our own style where we could simply select or create an element selector of business card and then say custom card color. Set that to red and custom text color to white. Save that. Then, in our index HTML, we'll go ahead and import my card and drop that right here. When we save it, we've got that custom coloring.

[05:37] Now, another way we could do that is, let's say I'm going to have two business cards here. I'm going to create a class called, "red." I'm going to apply that class to this second card. What we get is two cards, one using the default and the other using our class of red.