Question

我试图写一个会影响外部dom的聚合物成分。

<dom-module id="ux-increase-font">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>
    <paper-button>
      <iron-icon icon="arrow-upward"></iron-icon>
      Increase
    </paper-button>
  </template>

  <script>
    Polymer({
      is: 'ux-increase-font',
      properties: {},
      listeners: {
        tap: 'increaseFont'
      },
      increaseFont: function() {
        fontSize = parseInt($('body').css('font-size'));
        if (fontSize > 10) {
          $('body').css('font-size', (fontSize + 2) + 'px');
        }
      }

    });
  </script>
</dom-module>

这不起作用，我不知道为什么。我在主页上包含了domtastic，所以$应该可用，并且它在控制台中。但是当我点击元素时，我得到了$ is not defined，表面上是因为在widget的阴影DOM中domtastic不可用。

我试图吃蛋糕并吃掉它，我想要一个可以从小部件的阴影DOM中调用的domtastic副本来操作父页面的真实DOM。

Answer 1

Tomasz是对的，影子DOM不是问题。在我的情况下，主体上没有设置font-size属性，所以我写了一个检查以应用默认值，以防没有那里：

<script>
  Polymer({
    is: 'ux-increase-font',
    properties: {},
    listeners: {
      tap: 'increaseFont'
    },
    increaseFont: function() {
      fontSize = document.body.style.fontSize;
      if (!fontSize) {
        document.body.style.fontSize = '14px';
      } else {
        fontSize = parseInt(fontSize);
      }
      if (fontSize > 10) {
        document.body.style.fontSize = fontSize + 2 + 'px');
      }
    }
  });
</script>

聚合物组件影响外部DOM

1 个答案: