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

Question

我阅读了 Polymer 的文档:

Every Polymer element has a this.root property which is the root of its local DOM tree.

( 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
[]

更令人困惑的是，仍在文档中:

Calling append/insertBefore adds the node to parent’s light DOM. In order to insert/append into the local DOM of a custom element, use a node in the local DOM as a parent (or this.root, which is the root of the local DOM).

我错过了什么吗？如何在 Chrome 控制台中查看元素的本地 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

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