在 angular 9 应用程序中托管基于 lit-element 的 Web 组件的问题
Issue with hosting lit-element based Web Component in angular 9 application
我使用 lit-element lit-html 创建了一个网络组件。它在现代浏览器以及使用 webcomponents-loader.js.
的 IE 11 中呈现良好
但是如果我在 Angular 应用程序中加载相同的 Web 组件，它就不会呈现。
在 index.html 文件中使用以下脚本标签。
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>
出现以下错误
SCRIPT28: Out of stack space
看来您还需要将这些模块转换为 ES 5 以支持 IE 等旧版浏览器。
下面的资料是我从Lit-element官网得到的
To support older browsers that don’t support ES6 and the web
components specifications, you’ll need to take a few extra steps to
produce code that will run on the older browsers. There are two basic
approaches you can take:
Build two versions of the project: a smaller, faster version for modern browsers and a transpiled version with extra polyfills for
legacy browsers.
Build a single version of the project for all browsers. This is simpler, but will be slower on modern browsers.
At a high level, you need to do the following for your legacy build:
Compile to ES5. Babel is the most commonly used tool for this.
You need to compile the lit-html and LitElement modules (from the node_modules folder) as well as your code.
You need to transform JavaScript modules into a format compatible with older browsers, such as SystemJS, or a plain
JavaScript file that can be loaded in a tag.
Don’t bundle the Babel runtime polyfills in with your web component code. They should be bundled separately.
Load the requisite polyfills before loading your web components.
- Load the Babel runtime polyfills first.
- Load the web components polyfills.
- In almost all cases, you’ll also want to load custom-elements-es5-adapter.js to ensure that your ES5 version
can also run on newer browsers. You can load this file either before
or after the web components polyfills.
参考：
我已经能够通过在 webcomponents.js
之前导入 core-js 来解决这个问题
引用自https://github.com/webcomponents/webcomponentsjs/issues/968#issuecomment-402674742
我还在努力理解好像还有更好的选择。
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"> </script>
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>
我使用 lit-element lit-html 创建了一个网络组件。它在现代浏览器以及使用 webcomponents-loader.js.
的 IE 11 中呈现良好但是如果我在 Angular 应用程序中加载相同的 Web 组件，它就不会呈现。 在 index.html 文件中使用以下脚本标签。
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>
出现以下错误
SCRIPT28: Out of stack space
看来您还需要将这些模块转换为 ES 5 以支持 IE 等旧版浏览器。
下面的资料是我从Lit-element官网得到的
To support older browsers that don’t support ES6 and the web components specifications, you’ll need to take a few extra steps to produce code that will run on the older browsers. There are two basic approaches you can take:
Build two versions of the project: a smaller, faster version for modern browsers and a transpiled version with extra polyfills for
legacy browsers.Build a single version of the project for all browsers. This is simpler, but will be slower on modern browsers.
At a high level, you need to do the following for your legacy build:
Compile to ES5. Babel is the most commonly used tool for this.
You need to compile the lit-html and LitElement modules (from the node_modules folder) as well as your code.
You need to transform JavaScript modules into a format compatible with older browsers, such as SystemJS, or a plain JavaScript file that can be loaded in a tag.
Don’t bundle the Babel runtime polyfills in with your web component code. They should be bundled separately.
Load the requisite polyfills before loading your web components.
- Load the Babel runtime polyfills first.
- Load the web components polyfills.
- In almost all cases, you’ll also want to load custom-elements-es5-adapter.js to ensure that your ES5 version can also run on newer browsers. You can load this file either before or after the web components polyfills.
参考：
我已经能够通过在 webcomponents.js
之前导入 core-js 来解决这个问题引用自https://github.com/webcomponents/webcomponentsjs/issues/968#issuecomment-402674742
我还在努力理解好像还有更好的选择。
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"> </script>
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>