Content Changes

Checklist » Content

✓ Content Changes

Will the component respond to runtime changes in its content (including reprojected content)?

Many components perform processing of their children: to layout them out, extract data from them, set styles of them, etc.

Polymer({

  attached: function() {
    /* Count the component's children. */
    var count = this.children.length;
  }
  
});

That processing should apply not only to initial component content, but to content added or changed at run-time as well. Moreover, changes need in [reprojected content](Content Reprojection) should also trigger such processing.

Issue: Observing content changes actually quite complex to do. The stock response here is, "Have the component wire up a MutationObserver to the host, and watch for changes in its own content." However, that approach fails to account for changes in reprojected content. Ideally, a new component lifecycle method or other means will be created to meet this need.

In the meantime, the Basic Web Components project is developing a mixin that can be used for this purpose, or as a reference for other implementations. This triggers a contentChanged method whenever the component's content is set (when the component is instantiated) or changes (thereafter).

Polymer({

  contentChanged: function() {
    /* Count the component's children. */
    var count = this.children.length;
  }
  
});