Обновление веб-компонентов — больше времени для обновления до API версии 1

API-интерфейсы веб-компонентов v1 — это стандарт веб-платформы, который появился в Chrome, Safari, Firefox и (скоро) Edge. API версии 1 используются буквально миллионами сайтов, ежедневно охватывая миллиарды пользователей. Разработчики, использующие черновой вариант API версии 0, предоставили ценные отзывы, которые повлияли на спецификации. Но API версии 0 поддерживались только Chrome. Чтобы обеспечить совместимость, в конце прошлого года мы объявили , что эти проекты API устарели и их планируется удалить начиная с Chrome 73.

Поскольку многие разработчики запросили больше времени для миграции, API-интерфейсы до сих пор не удалены из Chrome. Проекты API версии 0 теперь планируется удалить из Chrome 80 примерно в феврале 2020 года.

Вот что вам нужно знать, если вы считаете, что можете использовать API версии 0:

• Проверьте свой сайт с отключенными API версии 0 . Если ваш сайт работает как положено, поздравляем! Все готово. Инструкции см. в разделе «Назад в будущее: отключение API версии 0» .
• Если вы используете библиотеку Polymer v1 или v2, следуйте инструкциям, опубликованным ранее командой Polymer.
• Если вы используете теневой DOM версии 0, пользовательские элементы версии 0 или импорт HTML, вам потребуется загрузить несколько полифилов. См. Использование полифилов v0 .
• Если вы не уверены, что используете, не волнуйтесь. См. Помощь! Я не знаю, какие API я использую!

Назад в будущее: отключение API v0

Чтобы протестировать свой сайт с отключенными API версии 0, вам необходимо запустить Chrome из командной строки со следующими флагами:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Вам необходимо выйти из Chrome, прежде чем запускать его из командной строки. Если у вас установлен Chrome Canary, вы можете запустить тест в Canary, сохраняя при этом загрузку этой страницы в Chrome.

Чтобы протестировать сайт с отключенными API версии 0:

1. Если вы используете Mac OS, перейдите по адресу chrome://version , чтобы найти путь к исполняемому файлу Chrome. Вам понадобится путь, указанный на шаге 3.
2. Выйдите из Хрома.

3. Перезапустите Chrome с флагами командной строки:

   --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

   Инструкции по запуску Chrome с флагами см. в разделе Запуск Chromium с флагами. Например, в Windows вы можете запустить:

   chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
   

4. Чтобы еще раз проверить, правильно ли вы запустили браузер, откройте новую вкладку, откройте консоль DevTools и выполните следующую команду:

   console.log(
   "Native HTML Imports?", 'import' in document.createElement('link'),
   "Native Custom Elements v0?", 'registerElement' in document,
   "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
   

   Если все работает как положено, вы должны увидеть:

   Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
   

   Если браузер сообщает true для какой-либо или всех этих функций, что-то не так. Прежде чем перезапускать Chrome с флагами, убедитесь, что вы полностью вышли из него.

5. Наконец, загрузите свое приложение и ознакомьтесь с его функциями. Если все работает так, как ожидалось, все готово.

Используйте полифилы v0

Полифиллы веб-компонентов версии 0 обеспечивают поддержку API-интерфейсов версии 0 в браузерах, которые не предоставляют встроенную поддержку. Если ваш сайт не работает в Chrome с отключенными API версии 0, возможно, вы не загружаете полифилы. Есть несколько возможностей:

• Вы вообще не загружаете полифилы. В этом случае ваш сайт должен не работать в других браузерах, таких как Firefox и Safari.
• Вы загружаете полифилы условно на основе анализа браузера. В этом случае ваш сайт должен работать в других браузерах. Перейдите к загрузке полифилов .

В прошлом команда Polymer Project и другие рекомендовали загружать полифилы условно на основе обнаружения функций. Этот подход должен нормально работать с отключенными API версии 0.

Установите полифилы v0

Полифилы веб-компонентов v0 никогда не публиковались в реестре npm. Вы можете установить полифилы с помощью Bower, если ваш проект уже использует Bower. Или вы можете установить из zip-файла.

• Для установки с помощью Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Чтобы установить из zip-файла, загрузите последнюю версию 0.7.x с GitHub:

  https://github.com/webcomComponents/webcomComponentsjs/releases/tag/v0.7.24

  Если вы устанавливаете из zip-файла, вам придется вручную обновлять полифилы, если выйдет другая версия. Вероятно, вы захотите проверить полифилы в своем коде.

Загрузите полифилы v0

Полифилы веб-компонентов v0 предоставляются в виде двух отдельных пакетов:

В составе пакета полифилов веб-компонентов также доступны отдельные полифилы. Использование отдельных полифилов по отдельности — это сложная тема, которая здесь не рассматривается.

Чтобы загрузить полифилы безоговорочно:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

Или:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

Если вы установили полифилы непосредственно из GitHub, вам необходимо указать путь, по которому вы установили полифилы.

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

Если вы условно загружаете полифилы с помощью анализа браузера (то есть загружаете полифилы в браузерах, отличных от Chrome), ваш сайт выйдет из строя, когда поддержка v0 будет удалена из Chrome.

Помощь! Я не знаю, какие API я использую!

Если вы не знаете, используете ли вы какие-либо API версии 0 или какие API вы используете, вы можете проверить вывод консоли в Chrome.

1. Если вы ранее запускали Chrome с флагами отключения API версии 0, закройте Chrome и перезапустите его в обычном режиме.
2. Откройте новую вкладку Chrome и загрузите свой сайт.
3. Нажмите Control+Shift+J (Windows, Linux, ChromeOS) или Command+Option+J (Mac), чтобы открыть консоль DevTools.
4. Проверьте вывод консоли на наличие сообщений об устаревании. Если выводится много данных на консоль, введите «Устаревшие» в поле «Фильтр» .

Вы должны увидеть сообщения об устаревании для каждого API версии 0, который вы используете. Вывод выше показывает сообщения для импорта HTML, пользовательских элементов v0 и теневого DOM v0.

Если вы используете один или несколько из этих API, см. раздел Использование полифилов версии 0 .

Следующие шаги: отказ от v0

Убедитесь, что полифилы версии 0 загружаются, и ваш сайт продолжит работать даже после удаления API версии 0. Мы рекомендуем перейти на API-интерфейсы веб-компонентов v1, которые широко поддерживаются.

Если вы используете библиотеку веб-компонентов, например библиотеку Polymer, X-Tag или SkateJS, первым делом нужно проверить, доступны ли новые версии библиотеки, поддерживающие API версии 1.

Если у вас есть собственная библиотека или вы написали собственные элементы без библиотеки, вам потребуется обновиться до новых API. Эти ресурсы могут помочь:

• Что нового в пользовательских элементах
• Что нового в Shadow DOM v1

Подведение итогов

Проекты API веб-компонентов v0 будут прекращены. Если вы уберете что-то из этого поста, убедитесь, что вы тестируете свое приложение с отключенными API версии 0 и загружаете полифилы по мере необходимости .

В долгосрочной перспективе мы рекомендуем вам перейти на новейшие API и продолжать использовать веб-компоненты!