From the course: Learning Polymer

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Define component structure

Define component structure - Polymer Tutorial

From the course: Learning Polymer

Define component structure

- [Teacher] Let's start off by defining the structure of our custom message banner element. So, in your code editor, let's open the message-banner.html file, in 03_02_start. So, you can see I've already provided the basic html structure for defining the component. Up top, here is the <dom-module tag, with the id of "message-banner", and that's going to be the html tag name of our element. So, at the top of the file, I'm using html imports to import the polymer-element file, which contains the necessary Polymer logic to process this file, and it also provides the class definition for Polymer.Element, which we'll be extending to create our own element. Inside the <dom-module tag, I've got an empty <template> tag, which will hold the html that defines the structure for this tag, along with the CSS styles that we will add later. So, let's go ahead and define the html for this element. Inside the <template> tag, I'm going to add the following html code. I'm going to put in a <div, and I'll…

Contents