在 x-num.html 中
<link rel="import" href="../polymer/polymer.html">
<dom-module id="x-num">
<style></style>
<template>
<span id="number"></span>
</template>
</dom-module>
<script>
Polymer({
is: "x-num",
properties: {
type: String,
value: 'normal'
},
attached: function() {
var contentNode = Polymer.dom(this).childNodes[0];
var number = Number(contentNode.textContent);
var result = "";
switch(this.type){
case "simplified":
if(number > 1000)
result = number / 1000 + "K+";
else
result = number;
break;
case "comma":
result = number.toLocaleString('en-IN');
break;
case "normal":
default:
result = number;
break;
}
this.$.number.textContent = result;
},
detached: function(){
console.log("detached");
},
attributeChanged: function(name, type){
console.log("attribute Changed: "+name);
}
});
</script>
在 index.html 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>Polymer = {dom: 'shadow'};</script>
<title>Testing Polymer Element</title>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="x-num.html">
</head>
<body>
<x-num>3546</x-num>
<br/>
<x-num type="comma">3546</x-num>
<br/>
<x-num type="simplified">3546</x-num>
</body>
</html>
当我尝试做document.querySelector("x-num").innerHTML = "4000"时，它仍然显示3546，我想问一下是否有结果当内容改变时改变
最佳答案
如果我将这个 setNumber 函数添加到 x-num.html
<script>
Polymer({
...,
setNumber: function(number) {
this.$.number.textContent = number;
}
});
我可以在 index.html 中将每一行更改为“4000”:
...
<script>
var list = document.getElementsByTagName('x-num');
for (i = 0; i < list.length; i++)
list[i].setNumber(4000);
</script>
</body>
我正在使用 Polymer 0.9-rc.1
关于javascript - 更新本地 dom 不会反射(reflect) shady dom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30193845/