Polymer.js 2.0：如何获取当前组件的DOM对象（DOM就绪及挂载后）

当然可行！在Polymer 2.0中，完全可以在DOM就绪和组件挂载到文档后获取对应的DOM对象，而且有一套标准的方法来实现。我给你分场景和通用方法详细说明：

当组件自身的DOM（默认是Shadow DOM）创建完成后，你可以通过ready()生命周期钩子来获取DOM对象。这个阶段组件还没挂载到文档树，但内部的DOM结构已经生成，适合初始化内部元素：

class MyComponent extends Polymer.Element {
  static get is() { return 'my-component'; }

  static get template() {
    return html`
      <div id="innerContent">Hello from Polymer</div>
    `;
  }

  ready() {
    super.ready(); // 必须调用父类的ready方法
    // 获取组件自身的DOM对象（就是<my-component>这个元素）
    console.log('组件自身DOM:', this);
    // 获取Shadow DOM根节点
    console.log('Shadow根节点:', this.shadowRoot);
    // 获取模板内的特定元素（通过Polymer自动绑定的this.$）
    console.log('内部元素:', this.$.innerContent);
    // 也可以用标准DOM查询
    console.log('通过查询获取的内部元素:', this.shadowRoot.querySelector('#innerContent'));
  }
}

customElements.define(MyComponent.is, MyComponent);

当组件被添加到页面的文档树中时，会触发connectedCallback()钩子（标准自定义元素生命周期），此时组件已经处于文档上下文，可以安全执行依赖文档的操作（比如计算元素位置、绑定全局事件等）：

class MyComponent extends Polymer.Element {
  // ... 其他代码 ...

  connectedCallback() {
    super.connectedCallback(); // 必须调用父类方法
    // 组件已挂载到文档，此时this就是组件的DOM对象
    console.log('组件已挂载，自身DOM:', this);
    
    // 如果需要等待数据绑定完成后的DOM更新，用this.async()延迟执行
    this.async(() => {
      console.log('确保DOM完全更新后的组件状态:', this.offsetHeight);
    });
  }
}

在Polymer 2.0中，获取DOM对象主要有这几种通用方式：

• 获取组件自身的DOM对象：直接使用this，因为Polymer组件的实例本身就是一个标准的HTMLElement，对应页面中的组件标签（比如<my-component>）。
• 获取Shadow DOM根节点：使用this.shadowRoot，Polymer默认启用Shadow DOM，模板内的所有元素都在这个根节点下。
• 获取模板内的特定元素：
  • 便捷方式：this.$.元素ID，Polymer会自动收集模板中带有id属性的元素，存入this.$对象中，直接通过ID访问即可。
  • 标准DOM查询：this.shadowRoot.querySelector('CSS选择器')或this.shadowRoot.querySelectorAll('CSS选择器')，适合需要复杂选择器的场景。
• 如果禁用了Shadow DOM：如果组件设置了static get properties() { return { noShadow: true }; }，那么内部元素直接在组件自身的DOM下，此时可以用this.querySelector('CSS选择器')来查找内部元素，this.$依然有效。

需要注意的是，所有生命周期钩子中必须调用父类的对应方法（比如super.ready()、super.connectedCallback()），否则会导致Polymer的内部逻辑失效。

内容的提问来源于stack exchange，提问作者Nomura Nori