Polymer: How to watch for change in <content> properties

content-tag, html, javascript, polymer, web-component

Solution

Native properties like `title` are not observable by Polymer's data-binding system (e.g. `Object.observe()` [info]). It's generally a good idea to avoid them.

In your example, I've changed `title` to `mytitle` and published it with `reflect: true` so the property value reflects back to the attribute. This way you can completely avoid `.getAttribute()` and just check `.mytitle` on in-elements. You can also use `{{mytitle}}` in bindings.

You can do this through mutation observers [1]. Polymer provides `onMutation` to monitor children but you want to monitor attributes of children. For that, you need a pure MO:

ready: function() {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      if (m.target.localName == 'in-element') { // only care about in-element
        console.log(m.attributeName, m.oldValue, m.target.mytitle);
      }
    });  
  });
  // Observe attribute changes to child elements
  observer.observe(this, {
    attributes: true,
    subtree: true,
    attributeOldValue: true
  }); 
}

Demo: http://jsbin.com/doxafewo/1/edit

In `domReady()`, I also changed your alert of `this.children[0]` to `this.$.firstin.getDistributedNodes()[0].mytitle`. Using `getDistributedNodes()` is better because you're guaranteed to have the nodes that are actually passing through the `<content>` insertion point [2].

Problem

I'm just starting to learn Polymer. Here is a generic version of my polymer element: ``` <polymer-element name="my-element"> <template> <style> :host { position:absolute; width: 200px; height: 100px; background-color: green; } </style> <p>my element</p> <content id="first-in"></content> <content id="second-in"></content> </template> <script> Polymer('my-element', { domReady: function() { alert(this.children[0].getAttribute('title')); //this returns the value I want to observe } }); </script> <polymer-element> ``` The content tags are both being filled with another custom element (again slightly simplified): ``` <polymer-element name="in-element" attributes="title"> <template> <style> ... </style> <p>{{title}}</p> </template> <script> Polymer('in-element', { title: 'me' }); </script> <polymer-element> ``` What I want to be able to do is call a function in my-element when the title attribute in (any) in-element (put in the content tag) is changed (by a click event or whatever). I'm not sure how to access this using observe or if I need to use mutationObserver, etc. How is this done/Is it possible?

Original source