IE - Events not working in IE - Undefined Element.matches

Found a bug while using event in IE due to the fact that Element.matches.msMatchesSelector is not being used.

Example:

xtag.register('dummy-component', { content: '<div><input type="text"/></div>', lifecycle: { // Fires when an instance of the element is created created: function () { xtag.addEvent(this, 'input:delegate(input)', function() { console.log("Input value updated"); }); } } });

Every time I change the input value the event will be triggered. It works as expected on all browsers but fails for Internet Explorer:

After a quick look it seems that the prefix is wrongly calculated when using IE:

prefix = (function () { var keys = Object.keys(window).join(); var pre = ((keys.match(/,(ms)/) || keys.match(/,(moz)/) || keys.match(/,(O)/)) || [null, 'webkit'])[1].toLowerCase(); return { dom: pre == 'ms' ? 'MS' : pre, lowercase: pre, css: '-' + pre + '-', js: pre == 'ms' ? pre : pre.charAt(0).toUpperCase() + pre.substring(1) }; })(),

The value of pre should be ms but it's returned as "o". This is the value of my keys variable:

__BROWSERTOOLS_CONSOLE_SAFEFUNC,__BROWSERTOOLS_CONSOLE_BREAKMODE_FUNC,__BROWSERTOOLS_CONSOLE,__BROWSERTOOLS_EMULATIONTOOLS_ADDED,console,__BROWSERTOOLS_DOMEXPLORER_ADDED,__BROWSERTOOLS_MEMORYANALYZER_ADDED,__BROWSERTOOLS_DEBUGGER,core,__core-js_shared__,Symbol,Promise,WeakSet,Reflect,System,asap,Observable,WebComponents,JsMutationObserver,HTMLTemplateElement,HTMLImports,CustomElements,unwrap,wrap,cd,dir,select,$,$$,$_,keys

As you can see there's no match for /,(ms)/ however there's a match for /,(O)/ because of the Observable key.

Is there a better way to detect which prefix to use? The window object keys doesn't seem to be the right place for it.

x-tag / core

IE - Events not working in IE - Undefined Element.matches #172