原文地址：developers.google.com/web/updates…
原文作者：developers.google.com/web/resourc…
发布时间：2019年7月
Web Components v1 APIs 是一种网络平台标准，已经在 Chrome、Safari、Firefox 和（很快）Edge 中推出。数百万个网站都在使用v1 API，每天有数十亿用户使用。使用v0 API草案的开发人员提供了宝贵的反馈意见，这些意见影响了规范的制定。但是v0 APIs只被Chrome支持。为了确保互操作性，去年年底，我们宣布这些API草案已被废弃，并计划从Chrome 73开始删除。
由于有足够多的开发者要求有更多的时间进行迁移，这些 API 尚未从 Chrome 浏览器中移除。v0草案API现在的目标是在Chrome 80中移除，大约在2020年2月。
如果您认为您可能正在使用v0 API，那么您需要知道以下内容。
- 在禁用v0 APIs的情况下测试您的网站。如果您的网站能够如期运行，恭喜您！您已经完成了测试。您已经完成了。请看回到未来：禁用 v0 APIs 的说明。
- 如果您使用的是Polymer库v1或v2，请遵循之前Polymer团队发布的说明。
- 如果你正在使用影子DOM v0、自定义元素v0或HTML导入，你将需要加载一些polyfills。请看使用v0的polyfills。
- 如果你不确定你使用的是什么，不要担心。请看帮助! 我不知道我在使用什么API!
回到未来：禁用 v0 APIs
要在禁用v0 APIs的情况下测试你的网站，你需要从命令行启动Chrome，并使用以下标志。
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
在从命令行启动它之前，你需要先退出Chrome浏览器。如果您安装了Chrome Canary，您可以在保持Chrome浏览器加载此页面的同时，在Canary中运行测试。
要在禁用v0 APIs的情况下测试你的网站。
- 如果你是在Mac OS上，浏览chrome://version，找到Chrome的可执行路径。在步骤 3 中你会需要这个路径。
- 退出 Chrome 浏览器。
- 使用命令行标志重新启动 Chrome。
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports有关使用标志启动Chrome的说明，请参见使用标志运行Chromium。例如，在Windows上，你可以运行:
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports。
- 要仔细检查是否正确启动了浏览器，打开一个新的标签页，打开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
如果浏览器对任何或所有这些功能的报告为真，就说明出了问题。确保你已经完全退出了Chrome浏览器，然后用标志重新启动。
- 最后，加载您的应用程序并运行这些功能。如果一切都按预期工作，你就可以了。
使用 v0 polyfills
Web Components v0 polyfills 在不提供本地支持的浏览器上为 v0 API 提供支持。如果您的网站在禁用 v0 APIs 的 Chrome 浏览器上无法运行，您可能没有加载 polyfills。有几种可能。
- 您根本没有加载 polyfills。在这种情况下，您的网站在其他浏览器上应该会失败，例如 Firefox 和 Safari。
- 您正在根据浏览器的嗅探有条件地加载 polyfills。在这种情况下，您的网站应该可以在其他浏览器上运行。向前跳到加载polyfills。
在过去，Polymer项目团队和其他团队建议根据特征检测有条件地加载polyfills。这种方法在禁用v0 APIs的情况下应该可以正常工作。
安装 v0 polyfills
Web Components v0 polyfills从未发布到npm注册表。如果您的项目已经在使用Bower，您可以使用Bower安装这些polyfills。或者您也可以从一个zip文件中安装。
- 用Bower安装
bower install --save webcomponents/webcomponentsjs#^0.7.0
- 要从 zip 文件安装，请从 GitHub 下载最新的 0.7.x 版本。
如果从zip文件安装，如果有其他版本出现，你将不得不手动更新polyfills。你可能会想在你的代码中检查polyfills。
加载v0的polyfills
Web Components v0的polyfills作为两个独立的捆绑包提供。
| --- | --- webcomponents-min.js | 包括所有的 polyfills。这个捆绑包包括影子DOM polyfill，它比其他polyfills大得多，对性能影响更大。只有当你需要影子DOM支持时才使用这个捆绑包。 webcomponents-lite-min.js | 包含了除阴影DOM之外的所有polyfills。注意：Polymer 1.x用户应该选择这个捆绑包，因为Shadow DOM仿真直接包含在Polymer库中。Polymer 2.x用户需要一个不同版本的polyfills。详情请看Polymer项目的博客文章。
webcomponents-min.js 包括所有的 polyfills。这个捆绑包包括影子DOM polyfill，它比其他polyfills大得多，对性能影响更大。只有当你需要影子DOM支持时才使用这个捆绑包。 webcomponents-lite-min.js
也有单独的polyfills可以作为Web Components polyfill包的一部分。单独使用单独的polyfills是一个高级话题，这里不做介绍。
要无条件地加载polyfills。
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>
或者。
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>
如果你直接从GitHub安装了polyfills，你需要提供安装polyfills的路径。
如果您根据功能检测有条件地加载polyfills，当v0支持被移除时，您的网站应该继续工作。
如果您使用浏览器嗅探有条件地加载 polyfills（即在非 Chrome 浏览器上加载 polyfills），当 v0 支持从 Chrome 移除时，您的网站将失败。
帮忙！我不知道什么是API。我不知道我使用的是什么API!
如果您不知道自己是否正在使用任何 v0 API，或者您正在使用哪些 API，您可以检查 Chrome 中的控制台输出。
- 如果你之前启动Chrome时设置了禁用v0 API的标志，请关闭Chrome并正常重启。
- 打开一个新的 Chrome 标签页并加载您的网站。
- 按 Control+Shift+J (Windows、Linux、Chrome OS) 或 Command+Option+J (Mac) 打开 DevTools 控制台。
- 检查控制台输出是否有废弃信息。如果有很多控制台输出，在 "过滤器 "框中输入 "废弃"。
你应该看到你正在使用的每个 v0 API 的弃用消息。上面的输出显示了 HTML Imports、自定义元素 v0 和 shadow DOM v0 的消息。
如果您正在使用这些 API 中的一个或多个，请参见使用 v0 polyfills。
下一步：脱离v0
确保v0的polyfills被加载，应确保您的网站在v0 APIs被移除后仍能继续工作。我们建议转移到广泛支持的Web Components v1 APIs。
如果您使用的是Web Components库，如Polymer库、X-Tag或SkateJS，第一步是检查该库是否有支持v1 APIs的新版本。
如果你有自己的库，或者在没有库的情况下编写了自定义元素，你就需要更新到新的API。这些资源可能会有帮助。
总结
Web Components v0 draft APIs 将会消失。如果你从这篇文章中得到了一件事，请确保你在禁用v0 APIs的情况下测试你的应用程序，并根据需要加载polyfills。
从长远来看，我们鼓励您升级到最新的API，并继续使用Web Components!
通过www.DeepL.com/Translator （免费版）翻译
