角度元素输出在 IE11 中不起作用

Question

角度元素输出在 IE11 中不起作用

jow*_*wey 7 internet-explorer-11 custom-element angular angular-elements

我尝试让 Angular Elements 在 IE11 中工作。我的自定义元素（简单按钮）已经显示，输入绑定按预期工作，但输出绑定没有。

在 IE 11 中单击我的自定义元素按钮会导致错误：

该对象不支持此操作

到目前为止我做了什么：

删除添加的自定义元素的 polyfill ng add @angular/elements（在 IE 中无法正常工作）
将所有 Angular 包更新为 7.2.1
将以下 polyfills 添加到polyfills.ts：

import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

Run Code Online (Sandbox Code Playgroud)

手动引导模块
ng build --output-hashing=none并将所有生成的文件打包到btn-element.js其中http-server用于本地测试（请参阅下面的index.html）。

我错过了特定的 polyfill 还是我做错了什么？或者它只是不可能？

app.module.ts:

@NgModule({
  declarations: [ ButtonComponent ],
  imports: [ BrowserModule ],
  entryComponents: [ ButtonComponent ]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customBtn = createCustomElement(ButtonComponent, { injector });
    customElements.define('app-btn', customBtn);
  }
  ngDoBootstrap() { }
}

Run Code Online (Sandbox Code Playgroud)

button.component.ts:

@Component({
  template: `<button (click)="handleClick()">{{ label }}</button>`,
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
  @Input() label;
  @Output() myaction = new EventEmitter<number>();
  private clicksCt: number = 0;

  constructor() { }

  handleClick() {
    this.clicksCt++;
    this.myaction.emit(this.clicksCt);
  }
}

Run Code Online (Sandbox Code Playgroud)

索引.html

<html lang="en">
<head>  
  [...]
  <script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>

<script>
    var button = document.querySelector('app-btn');
    button.addEventListener('myaction', function (event) {
         console.log('action emitted: ' + event.detail);          <!-- not working! -->
     });
     setTimeout(function () {
         button.label = 'Async value change happened...'   <!-- working! -->
     }, 2000);
    }
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我也试过<app-btn label="Button Text" (myaction)="test($event)"></app-btn>没有成功。

编辑： 最小示例

它似乎不是在 IE 11 中工作。要重现我的 reslut 并看到与在 Chrome 中运行 StackBitz 相同的内容，请按照下列步骤操作：