angular: @angular/elements component events are called from an inconsistent zone

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Event handlers in an angular element (registered as a custom element with @angular/elements), are called either from the angular zone or from the root zone depending on how the element is instantiated, leading to different behaviors:

• if the element is in the initial markup of the page (before the custom element is registered), then event handlers are called from the angular zone (as expected), and the change detection and refresh of the template are done correctly
• if the element is created from the angular zone (after the custom element is registered), then event handlers are called either from the angular zone (in Chrome, leading to a correct behavior) or from the root zone (in other browsers, leading to an incorrect behavior: the change detection is not done and the template is not refreshed)
• if the element is created from the root zone (after the custom element is registered), then event handlers are called from the root zone (both in Chrome and other browsers), leading to an incorrect behavior: the change detection is not done and the template is not refreshed.

Expected behavior

The angular element should behave correctly no matter how it is instantiated. In the minimal reproduction sample, clicking on “Toggle display” should work no matter the line.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-dxu5td?file=src%2Fapp%2Fhello.component.ts Depending on the line and the browser, clicking on the “Toggle display” works or has no effect. In Chrome, only the first two lines work correctly. In other browsers, only the first line works correctly.

What is the motivation / use case for changing the behavior?

The current behavior is inconsistent. Event handlers should be called from the angular zone no matter how the component is instantiated, which would allow those components to be created from any other framework even if that framework does not run in the angular zone.

Environment

Angular version: 6.0.3

Browser:
- [x] Chrome (desktop) version 66.0.3359.181
- [x] Firefox version 60.0.1
- [x] IE version XX
- [x] Edge version XX