Polymer 2.0如何访问嵌套模板内指定ID的元素？

哈哈，这个坑我之前踩过！Polymer的this.$确实只能帮你拿到当前元素主模板里的顶级ID元素，像你这种嵌套在<vaadin-dialog>内部子模板里的<work-order-new>，因为它属于dialog自己的Shadow DOM渲染内容，并不会被自动注册到当前宿主元素的$对象里，所以直接用this.$.workordernew肯定拿不到。

不过别担心，要访问它还是有办法的，给你两个实用方案：

方案一：通过Dialog的Shadow DOM查询元素 #

<vaadin-dialog>的内部模板内容会渲染在它自己的Shadow DOM里，所以你可以先拿到dialog的实例，再通过它的shadowRoot去查询目标元素：

// 先获取外层的dialog实例
const dialog = this.$.dialog;
// 确保dialog已经渲染完成（比如在opened事件触发后）
dialog.addEventListener('opened-changed', (e) => {
  if (e.detail.value) {
    // 从dialog的Shadow DOM里查找目标元素
    const workOrderNew = dialog.shadowRoot.querySelector('#workordernew');
    // 现在就可以操作workOrderNew了
    console.log(workOrderNew);
  }
});

注意一定要等dialog打开并完成内部内容渲染后再查询，不然可能拿不到元素。

方案二：通过事件源直接获取元素 #

既然你已经给<work-order-new>绑定了on-submitted事件，那在事件处理函数里，直接通过event.target就能拿到这个元素本身，这种方式更可靠，不需要依赖DOM查询：

_onWorkOrderSubmitted(event) {
  const workOrderNew = event.target;
  // 这里就可以直接操作workOrderNew了
  console.log(workOrderNew);
}

简单来说，嵌套模板里的元素不能直接用this.$访问，但通过以上两种方式完全可以拿到它~

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