Extending DOM elements
Instead of making a new Polymer component from scratch, as we did in the previous recipes, you can also start from a native HTML element and build upon that. This is made possible because our component is backed up by a class that can inherit the properties and behavior of an existing HTML element class. For our example, we will extend a Div element. You can find the code in the project dom_extend.
How to do it...
- The script starts with
web\index.html, where a component with the namedom-extendis imported through the following line:<link rel="import"href="dom_extend.html">
From this, we know that the component is defined in
dom_extend.html, and the code behind it is in a file nameddom_extend.dart. For a discussion of the other tags, refer to the first recipe. Because we make a specialized <div>tag, we have to indicate this with anisattribute, as follows:<body> <div is="dom-extend">Initial div content </div...
