Polymer自定义元素中onclick调用CarDialog提示未定义问题

嘿，这个坑我踩过！报错的核心原因其实很直白：当你把FAB和对话框挪到自定义Polymer元素里后，元素内部的DOM被Shadow DOM封装起来了，而你用onclick="carDialog.open()"这种写法时，代码是在全局浏览器上下文里执行的——全局作用域根本看不到自定义元素内部的carDialog，自然就会喊“找不到它”。

下面给你几种解决办法，按推荐程度排序：

方法一：用Polymer原生事件绑定（最推荐） #

Polymer有自己的事件绑定语法，能直接在组件内部的作用域里找到目标元素，完全符合组件开发规范：

1. 修改HTML模板部分 #

把原来的onclick换成Polymer的on-click属性，指定一个处理函数名：

<paper-fab icon="maps:directions-car" on-click="openCarDialog" class="blue"></paper-fab>
<paper-dialog no-overlap id="carDialog">
  <paper-toolbar>
    <div slot="top" class="title">Title</div>
  </paper-toolbar>
  <!-- 对话框的其他内容 -->
</paper-dialog>

2. 在组件脚本里添加处理函数 #

在自定义元素的类里，用this.$.carDialog就能直接拿到Shadow DOM里的对话框元素（this.$是Polymer提供的快捷方式，专门用来获取组件内id对应的元素）：

class YourCustomElement extends Polymer.Element {
  static get is() { return 'your-custom-element'; } // 替换成你的组件名

  openCarDialog() {
    this.$.carDialog.open();
  }
}
customElements.define(YourCustomElement.is, YourCustomElement);

方法二：临时救急的全局上下文写法（不推荐，仅作参考） #

如果暂时不想改事件绑定逻辑，也可以在onclick里手动穿透Shadow DOM找到对话框，但这种写法繁琐又不优雅，不建议长期用：

<paper-fab icon="maps:directions-car" onclick="this.getRootNode().querySelector('#carDialog').open()" class="blue"></paper-fab>

方法三：用Polymer旧版DOM API（仅适配老版本Polymer） #

如果你用的是Polymer 1.x这类旧版本，可以用Polymer.dom来查找元素：

<paper-fab icon="maps:directions-car" onclick="Polymer.dom(event).localTarget.parentElement.querySelector('#carDialog').open()" class="blue"></paper-fab>

总的来说，方法一是最靠谱的，代码清晰、符合Polymer的设计理念，后续维护也方便。

内容的提问来源于stack exchange，提问作者R. Radio