Polymer mixins

by Tomek

HTML

<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<script src="http://www.polymer-project.org/components/polymer/polymer.js"></script>
<template>

  <style>
    :host {
      display: block;
      border: 1px solid black;
      background-color: #EEE;
    }
  </style>

    My color is <b>{{color}}</b>. Here is content:<br/>
    <br/>

  <content></content>

</template>

<script>

  var mixinTemplate = document.querySelector('template');

  mixin = {

    // TODO(sjmiles): 2/5/2014: remember that using 'this.super()' in mixin methods 
    // is unsupported

    registerCallback: function(element) {
      var template = mixinTemplate;
      // magic sauce to for the CSS polyfill
      if (Platform.ShadowCSS) {
        var clone = mixinTemplate.cloneNode(true);
        clone.content.appendChild(mixinTemplate.content.cloneNode(true));
        Platform.ShadowCSS.shimStyling(clone.content, element.name, element.extends);
        template = clone;
      }
      // have the element use the clone (this === the prototype)
      this.fetchTemplate = function() {
        return template;
      };
    },

    ready: function() {
      //console.info("my-list is ready!");
    },

    attached: function() {
      //console.info("my-list is attached!");
      this.children[0].style.color = this.color;
    },
    color: 'red'

  };

</script>

<polymer-element name="my-list">

  <script>
    Polymer('my-list', Platform.mixin({}, mixin));
  </script>

</polymer-element>

<polymer-element name="my-div" extends="div">

  <script>
    Polymer('my-div', Platform.mixin({}, mixin,{
      color: 'blue'
    }));
  </script>

</polymer-element>

<my-list>
  <li>one</li>
  <li>two</li>
</my-list>

<br>

<div is="my-div">
  <li>one</li>
  <li>two</li>
</div>