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 – but only when first attached. */
    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. Even if you envision your component's users typically defining content up front in static HTML, it's highly likely that someone will want to manipulate the component's content dynamically.

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 whenever they change. */
    var count = this.children.length;
  }
  
});