更新本地 dom 不会反映 shady dom答案

【问题标题】：Updating local dom won't reflect shady dom更新本地 dom 不会反映 shady dom
【发布时间】：2015-05-12 14:26:48
【问题描述】：

在 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，我想问一下，当内容发生变化时，是否有办法让结果发生变化

【问题讨论】：

标签： javascript html dom polymer shady-dom

【解决方案1】：

如果我将此 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

【讨论】：