Polymer component dispatching event in Safari

Question

I have a custom Polymer 2+ component like so:

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

Inside the component, I have this block of code in several places (on ready() , on a mouse press, etc.) for testing:

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

In Chrome, both of these can be caught and logged in the below listener that implements the button:

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

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

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

However, in Safari 11, on macOS Sierra, they are not. CustomEvent should be supported in Safari, am I doing something silly here?

Answer 1

Okay I figured it out, but the answer is bizarre. If I change this line:

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

to

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

it will all of a sudden work in Safari. I have no explanation as to why, there shouldn't be a naming conflict as getElementById() should still be able to select the element.