Question

我们有一个自定义元素正在进行AJAX调用，以获取服务器端生成的一些html，然后通过Polymer.dom（this）.innerHTML注入其轻量级。来自服务器的响应中包含另一个自定义元素，该元素公开CSS属性以用于主题目的。在主页面上，我们正在设置属性的值，但它似乎不起作用。我们如何让Polymer为另一个元素分布的动态添加的轻DOM元素设置样式。

的index.html

<style is="custom-style">
  x-bar {
    --mixin-property: {
      background: red;
    };
  }
</style>
...
<body>
  <x-baz>
  </x-baz>
</body>

的x baz.html

<dom-module id="x-baz">
  <template>
    <x-foo></x-foo>
  </template>
</dom-module>
<script>
  Polymer({
    is: "x-baz"
  });
</script>

的x foo.html

<dom-module id="x-foo">
  <template>
    <iron-ajax auto url="..." last-response="{{response}}"></iron-ajax>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: "x-foo",
    properties: {
      response: {
        type: String,
        obeserver: 'responseChanged'
      }
    },
    responseChanged: function(newVal) 
      Polymer.dom(this).innerHTML = newVal;
    }
  });
</script>

的x一个bar.html

<dom-module id="x-bar">
  <style>
    .elementToStyle {
      @apply(--mixin-property);
    }
  </style>
  <template>
    <div class="elementToStyle">
      ...
    </div>
  </template>
</dom-module>
</script>
  Polymer({
    is: "x-bar"
  });
</script>

iron-ajax调用返回<x-bar> ... </x-bar>。

我希望从AJAX响应中返回的x-bar内的div有一个红色背景，但它似乎并没有起作用。我们需要调整什么才能使其正常工作？

提前致谢！

Polymer 1.0：如何使用@apply设置分布式节点的样式？

0 个答案: