我们有一个自定义元素,它正在进行 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 具有红色背景,但它似乎不起作用。我们需要进行哪些调整才能使其正常工作?
提前致谢!