Поддержка Polyfill для Angular 9 пользовательских элементов? - PullRequest
Новая
       40

Поддержка Polyfill для Angular 9 пользовательских элементов?

0 голосов
/ 12 апреля 2020

Что Angular рекомендует для поддержки Polyfilling для пользовательских элементов, созданных с Angular?

Эта демоверсия работает только с этим полифиллом, добавленным к polyfills.ts: 

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

В этой статье говорится, что мы должны включить в polyfills.ts: 

import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";

И в этой статье говорится, что мы должны добавить следующее к index.html: 

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
  if (!window.customElements){document.write('<!--');}
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

Так что есть различия. Какой подход является правильным для Angular 9 проектов при развертывании пользовательских элементов, созданных с Angular?

1 Ответ

1 голос
/ 14 апреля 2020

все зависит от того, какие браузеры вы хотите поддерживать и связывать синтаксис, который генерирует ваше приложение.

@webcomponents/custom-elements/src/native-shim и @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js служат той же цели, они используются, если браузер не поддерживает ES2015 модули или потому, что приложение явно настроено для генерации только пакетов ES5.

@webcomponents/custom-elements и @webcomponents/custom-elements/src/native-shim также служат той же цели, которая заключается в обеспечении поддержки пользовательских элементов для браузеров, которые изначально не поддерживают пользовательские элементы.

Больше информации об этих полифиллах и о том, зачем и когда они нужны;

Я бы не советовал использовать приведенный ниже шаблон. 

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
 if (!window.customElements){document.write('<!--');}
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

Лучшей альтернативой будет; 

<script src="webcomponents/webcomponents-loader.js"></script>
<script nomodule src="webcomponents/custom-elements-es5-adapter.js"></script>
...