From the course: Learning Polymer

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Define component appearance

Define component appearance - Polymer Tutorial

From the course: Learning Polymer

Start my 1-month free trial

Define component appearance

- [Instructor] Now that we've defined the basic structure of our component, we'll take our basic component and add some CSS styling to it to give it a visual appearance. So in the code editor, let's open up the message banner file in 0303 start. And in the template section, we're going to add a style definition. So to do that, I will add a style tag. Okay. So inside the style definition, we're going to create a style that controls the appearance of the custom element itself. So we can style the HTML structure that's inside the custom element, too, but for the moment, we want to operate on the root-level custom element itself. And to do that, we use the host pseudo class, like this. So let's add some style rules for the host element. And we'll give it a background and a border. Some physical characteristics. And I'm going to have the display start off as being none. So the element will start out, by default, invisible. And what we want to do is have the element be visible when there's…

Contents