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 - 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.