3

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

索引.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 具有红色背景，但它似乎不起作用。我们需要进行哪些调整才能使其正常工作？

提前致谢！

4

0 回答 0