Текстовый оберточный элемент со связыванием в Polymer 1.0

Я создал пользовательский веб-компонент с Polymer, который обертывает текст и слегка изменяет его (преобразование в верхний регистр в этом доказательстве концепции).

Сам элемент работает со статическим содержимым. Однако, когда контент динамически привязан, компонент не может отображать содержимое.

Например:

<my-wrapper>Hello, World!</my-wrapper> <!-- Works -->
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn't work -->

В настоящее время я использую observNodes, которому удается инициировать исходное текстовое преобразование, но не может вызывать подпоследовательные изменения.

Мой текущий прототип определяется как:

<dom-module id="my-wrapper">
  <template>
    <span id="placeholder"></span>
  </template>
  <script>
    Polymer({
      is: 'my-wrapper',
      ready: function() {
        var self = this;
        Polymer.dom(Polymer.dom(this)).observeNodes(function(info) {
          self.$.placeholder.textContent = info.target.textContent.toUpperCase();
        });
        /*var mutationObserver = new MutationObserver(function(e) {
          console.log(e);
        });
        mutationObserver.observe(this.root, {characterData: true, childList: true});*/
      },
    });
  </script>
</dom-module>

И работающий JSBin для вышеупомянутой проблемы можно найти здесь: http://jsbin.com/jumewuzuho/1/edit?html,console,output.

Любые предложения о том, как записать изменение содержимого (light DOM), чтобы я мог преобразовать текст?

Как вы можете видеть в комментированном блоке кода, я уже пытался использовать MutationObserver, но не смог создать рабочий прототип. Я предполагаю, что я не использовал правильный node (this.root в моем случае).

Ответ 1

Я не думаю, что ObserveNodes (или MutationObserver) - лучший способ приблизиться к этому. ObserveNodes отслеживает, когда дочерние узлы добавляются и удаляются из вашего элемента.

В вашем случае узлы DOM не добавляются или удаляются, это просто внутренний текст изменяющегося элемента. Эти изменения не выбраны ObserveNodes.

Я бы порекомендовал другой подход, который по моему скромному мнению более согласован с полимерным способом делать вещи, используя тег content:

Чтобы поддерживать композицию элемента light DOM с его локальной DOM, Полимер поддерживает элемент контента. Элемент content обеспечивает точка вставки, при которой элемент DOM элемента объединяется с его локальный DOM

Я бы использовал тег content для создания точки вставки, а затем создавал его с помощью теневого DOM (text-transform: uppercase):

<dom-module id="my-wrapper">
  <template>
    <style>
      :host {
        text-transform: uppercase;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'my-wrapper'
    });
  </script>
</dom-module>