Safari中的聚合物组件分派事件

Question

我有一个自定义的Polymer 2+组件，如下所示：

<my-button id="my-button"></my-button>

在组件内部 ，我将此代码块放在多个位置（在ready() ，在鼠标按下等处）进行测试：

this.dispatchEvent(new Event('test'));
this.dispatchEvent(new CustomEvent('testCustom', {detail: {hey:'hey'}, bubbles:true, composed: true}));

在Chrome中， 这两种方法都可以捕获并记录在实现该按钮的以下侦听器中：

var myEl = document.getElementById('my-button')

myEl.addEventListener('test', function(){
   console.log('test reached');
})

myEl.addEventListener('testCustom', function(ev){
   console.log('test custom reached');
})

但是，在Safari 11中，在macOS Sierra上则不是。 Safari应该支持CustomEvent ，我在这里做傻事吗？

Answer 1

好的，我知道了，但是答案很奇怪。 如果我更改此行：

var myEl = document.getElementById('my-button')

至

var myEl = document.querySelector('my-button')

它将在Safari中突然起作用。 我没有任何解释，为什么不应该有命名冲突，因为getElementById()应该仍然能够选择元素。