extending-a-polymer-element.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
# Extending a Polymer element

Shows how to extend an existing Polymer element's Shadow DOM.

Use the `extends` attribute when defining the extender element, giving it the
name of the element you are extending. This lets your extender element
inherit from and data bind to the extendee element's properties and methods:

    <polymer-element name="extendee-element">
      ...
    </polymer-element>

    <polymer-element name="extender-element" extends="extendee-element">
      ...
    </polymer-element>

Include a `<shadow></shadow>` element in your extender element `<template>`
where you want the Shadow DOM from the extendee to appear:

  <polymer-element name="extender-element" extends="extendee-element">
    <template>
      <div>Hi, I'm {{name}}.</div>
      <shadow></shadow>
    </template>
      ...
  </polymer-element>

Using `<extendee-element>` renders:

    <div>My favorite color is red.</div>

Using `<extender-element>` renders:

    <div>Hi, I'm Rob.</div>
    <div>My favorite color is green.</div>

[jsbin](http://jsbin.com/punam/edit)
-->

<link rel="import" href="../../components/polymer/polymer.html">

<polymer-element name="extendee-element">
  <template>
    <div>My favorite color is {{color}}.</div>
  </template>
  <script>
    Polymer({
      color: "red"
    });
  </script>
</polymer-element>

<polymer-element name="extender-element" extends="extendee-element">
  <template>
    <div>Hi, I'm {{name}}.</div>
    <shadow></shadow>
  </template>
  <script>
    Polymer({
      name: "Rob",
      color: "green"
    });
  </script>
</polymer-element>