Material-components-web-components: mwc-top-app-bar: doesn't fire MDCTopAppBar:nav event on Edge/IE11

[frankiefu]

Added an event listener to mwc-top-app-bar, e.g.

bar.addEventListener('MDCTopAppBar:nav', () => {
    console.log('fired MDCTopAppBar:nav event');
});

When running on Edge/IE11 clicking on the menu button doesn't trigger the console log.

[jsilvermist]

*Counts down the days till Edge is Chromium and IE is dead*

So, where's the party gonna be at?

[frankiefu]

In createAdapter it tries to add an event listener on <slot>:
https://github.com/material-components/material-components-web-components/blob/db33fa427080e3f7ca773c5b628827a5fb5ec07c/packages/top-app-bar/src/mwc-top-app-bar.ts#L111
But there is an issue in ShadyDOM which prevents listeners on <slot> to work: https://github.com/webcomponents/shadydom/issues/252

cc @sorvell

[frankiefu]

A workaround would be adding a wrapper element (e.g. <span>) around the <slot> and add the event listener on the wrapper element.

[frankiefu]

FYI, @sorvell is working on a fix for this in shadydom