this.node在Chrome控制台中仅显示为#文档片段

this.node showing itself as just #document-fragment in Chrome console

本文关键字：显示 文档 片段 node Chrome 控制台 this      更新时间：2023-09-26

我阅读了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会将节点添加到父级的灯光DOM中。为了插入/附加到自定义元素的本地DOM中，请使用本地DOM中的一个节点作为父节点（或this.root，它是本地DOM的根）。

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

在处理Polymer的自定义元素时，任何DOM操作都应该使用Polymer.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这一事实之外）。

相关文章：