AttributeLink.html

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

<dom-module id="attribute-link">

  <script>
    Polymer({
      is: 'attribute-link',
      properties: {
        source: {
          type: String,
          reflectToAttribute: true,
          observer: 'setupAttributeObservers'
        },
        target: {
          type: String,
          reflectToAttribute: true
        },
        transformation: {
          type: String,
          reflectToAttribute: true,
          observer: 'transformationChanged'
        },
        noLocalLink: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        }
      },
      created: function() {
        this.mutationObservers = [];
      },
      attached: function() {
        this.setupAttributeObservers();
      },
      detached: function() {
        this.removeAttributeObservers();
      },
      transformationChanged: function() {
        // TODO: check tranformation for harmful code
        this.transformationFunction = function(source) { return eval(this.transformation); };
      },
      setupAttributeObservers: function() {
        if (!this.isAttached) return;
        this.removeAttributeObservers();
        this.bodyChanged = false;

        this.bodyMutationObserver = new MutationObserver((function() {
          this.async(function() {
            if (this.bodyChanged) this.setupAttributeObservers();
          }, 1000);
          this.bodyChanged = true;
        }).bind(this));
        this.bodyMutationObserver.observe(document.body, { childList: true, subtree: true });

        var source = this.parseConnectionString(this.source);
        if (!source) return;
        var elements = document.querySelectorAll(source.selector);
        for (var i = 0, c = elements.length; i < c; i++) {
          var mutationObserver = new MutationObserver(this.handleAttributeChange.bind(this));
          mutationObserver.observe(elements[i], { attributes: true, attributeFilter: [source.attribute] });
          this.mutationObservers.push(mutationObserver);
        }
      },
      removeAttributeObservers: function() {
        if (this.bodyMutationObserver) {
          this.bodyMutationObserver.disconnect();
          this.bodyMutationObserver = null;
        }
        for (var i in this.mutationObservers) {
          this.mutationObservers[i].disconnect();
          this.mutationObservers[i] = null;
        }
        this.mutationObservers = [];
      },
      handleAttributeChange: function(records) {
        var value = records[0].target.getAttribute(records[0].attributeName),
            target = this.parseConnectionString(this.target);
        if (!target) return;
        if (this.transformation) value = this.transformationFunction.call(this, value);
        if (typeof value === 'undefined') return;
        this.fire('linkedAttributeChanged', { selector: target.selector, attribute: target.attribute, value: value }, { node: this.parentNode });
        if (this.noLocalLink) return;
        var elements = document.querySelectorAll(target.selector);
        for (var i = 0, c = elements.length; i < c; i++) {
          if (value !== elements[i].getAttribute(target.attribute)) elements[i].setAttribute(target.attribute, value);
          if (target.attribute == 'value') elements[i][target.attribute] = value;
        }
      },
      parseConnectionString: function(str) {
        var p = str.lastIndexOf('@');
        return (p < 0) ? null : { selector: str.substr(0, p), attribute: str.substr(p+1) };
      }
    });
  </script>

</dom-module>