Question

我一直在玩Angular Elements，并试图实现最佳的浏览器兼容性。但是，我似乎已经走到了尽头，因为当我为Shadow DOM添加IE polyfill时，它将破坏chrome中的Element。

最初我遇到了错误'Failed to construct HTML element'，所以我将tsconfig.json中的'target'更改为es2015 / es6。

tsconfig.json

def searchVectors(i: Int, vectors: Vector[Vector[Int]]): (Int, Int) = {
    val row = vectors.indexWhere(_.contains(i)) // Try to get index of vector containing element
    if (row > -1) (row, vectors(row).indexOf(i)) // (row, col)
    else (-1, -1)
}

组件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

由于不支持es2015 / es6 +，因此更改目标碰巧会破坏IE。因此，我碰巧在@webcomponents包中找到了custom-elements-es5-adapter，该包包装了ES5以便为需要它的浏览器提供必要的ES6功能。然后，我还必须添加对自定义元素的支持。

polyfills.ts

// @dynamic
@Component({
    selector: 'flexybox-cardmanagement',
    templateUrl: './card-management.component.html',
    styleUrls: ['./card-management.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom
})

目前，它可以在Chrome中使用，但在IE中出现以下错误

SCRIPT438：对象不支持属性或方法“ attachShadow”

因此我尝试通过将以下内容添加到我的polyfills.ts中来为Shadow DOM添加polyfill：

/*****************************************************************************************
 * APPLICATION IMPORTS
 */
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
 import '@webcomponents/custom-elements/custom-elements.min';

这似乎可以解决IE中的问题，但是现在在chrome中给我以下错误：

未捕获的TypeError：无法读取的属性'defineProperties' 未定义

Answer 1

让自定义元素在IE11中工作确实是一种折磨。我可能不会把你带到那里，但至少要走一步。

我认为您几乎做对了所有事情，我已经执行了相同的步骤，但是我使用了不同的polyfills，所以也许您想尝试以下方法：

angular.json

"scripts": [
  // removed polyfill `document-register-element.js` that may be included with ng add @angular/elements
]

polyfills.ts

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

要检查是否可能是版本问题：

package.json （相关部分）

{
  "dependencies": {
    "@angular/**": "~7.2.1",
    "@webcomponents/custom-elements": "^1.2.1",
    "@webcomponents/shadydom": "^1.4.2",
    "core-js": "^2.5.4",
  }
}

信息：使用此配置，自定义元素对我而言可在Chrome，Firefox和IE11中使用，但我无法获得在IE11中可使用的输出绑定。我不知道为什么会这样，如果您对此感兴趣并找到解决方案，则可以here提供。

IE11的通用提示：
现在，这不是您的问题，但是，如果IE11抛出其各种错误之一，那么在import 'core-js/shim'中使用polyfills.ts会对我大有帮助。这将立即导入所有填充，以检查IE11是否错过了其中之一。如果是这样，您可以进一步解决，如果不知道，则必须寻找其他地方。

Angular Elements填充
如果要保留Angular使用的polyfill，可以尝试使用版本1.8.1。我读过某个地方（但不记得在哪里），此刻以后的版本会在IE中引起问题。

Answer 2

如果我正确理解该问题，则说明IE11不支持类，而Chrome必须具有适用于Web组件的类。有一个包装器，可以让您拥有一个捆绑软件，然后将功能性方法包装在chrome类中，但是我建议为此使用两个单独的捆绑软件，对于理解类的浏览器，不要编译为es5。

chrome和IE11同时支持Angular Element的问题

2 个答案: