Accessing an attribute on a child that's set with a data binding

Question

I have a little bit of markup that looks like this:

<polymer-element name="blog-post" noscript>
  <template>

    <mark-down>
      <textarea value="{{post}}"></textarea>
    </mark-down>

    <polymer-localstorage name="my-blog-editor" value="{{post}}">
    </polymer-localstorage>
  </template>
</polymer-element>

I'd like the mark-down tag to be able to see the value of the textarea but I'm having a hard time knowing when to query for it.

Inside of mark-down my code looks something like this:

  attached: function() {
      this.textarea = this.$.textareaContent.getDistributedNodes()[0];  // this grabs the textarea element

      // create an observer instance
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          console.log(mutation);
        });
      });

      // pass in the target node, as well as the observer options
      observer.observe(this.textarea, { attributes: true });
  }

Unfortunately the mutation observer never fires. I've tried checking for the value of textarea directly in attached and domReady but it's always null. The only success I've had is to use a setTimeout to check for the value asynchronously.

Answer 1

textarea is specifically difficult to use in this manner, because you cannot observe it's content changing with MutationObservers, only with events.

Worse still, there is no signal at all for setting textarea.value (which is what your binding will do).

If you want to use textarea like this, suggest you expose a property on the mark-down element for binding a value, and listen to events from the textarea to monitor user edits.

<mark-down value="{{post}}">
  <textarea></textarea>
</mark-down>