javascript - Safari 中的 Polymer 组件调度事件

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');
})

但是，在 macOS Sierra 上的 Safari 11 中，情况并非如此。 CustomEvent Safari 应该支持，我在这里做了一些愚蠢的事情吗？

Answer 1

好吧，我明白了，但答案很奇怪。如果我改变这一行:

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

到

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

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