this.node 在 Chrome 控制台中显示为 #document-fragment

Question

我阅读了 Polymer 的文档：

每个 Polymer 元素都有一个 this.root 属性，它是其本地 DOM 树的根。

(https://www.polymer-project.org/1.0/docs/devguide/local-dom.html)

如果我有一个像这样的简单元素：

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="dom-test">
  <template>
    <div>
      <hr>
      <span id="something">Something</span>
      <p>This is the local DOM</p>
      <p>Adding the contents:</p>
      <content></content>
      <p>End of contents!</p>
      <hr>
    </div>
  </template>

  <script>
    Polymer( {
      is: 'dom-test',
      ready: function(){
        var self = this;
        console.log( this.root );

        SELF = self;

      }
    })
  </script>

</dom-module>

注意：我知道 SELF 是一个全局变量。 然后使用 .html 文件中的元素：

...
<link rel="import" href="dom-test.html">
...
<dom-test><p>SECOND</p></dom-test>
...

如果我在 Chrome 控制台中输入SELF.root，我只会得到#document-fragment。 任何查询其内容的尝试都不起作用：

SELF.root.children
[]

更令人困惑，仍在文档中：

调用 append/insertBefore 将节点添加到父节点的 light DOM。为了插入/追加到自定义元素的本地 DOM，请使用本地 DOM 中的一个节点作为父节点（或 this.root，它是本地 DOM 的根）。

我错过了什么吗？如何在 Chrome 控制台中查看元素的 LOCAL DOM？

Answer 1

在处理 Polymer 的自定义元素时，应使用 Polymer.dom 处理任何 DOM 操作。来源：https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

Polymer.dom(SELF.root).children

如果你在它的声明之外引用元素也会更好。因此，您应该使用 document.querySelector 或 document.getElementById 并从那里开始工作，而不是声明全局 SELF 变量来引用该元素（除了每次附加 dom-test 时都会重写 SELF 的事实DOM 的元素）。