polymer - 优雅地降级自定义元素(或 polymer 元素)

Question

许多开发人员一直想知道如何在自定义元素(或 Polymer 元素)中实现优雅的降级。这适用于未使用 polyfill、不支持 Web 组件或只是关闭 JavaScript 的用例。

有没有人对如何做到这一点有任何想法？

Answer 1

我们通常对两种类型的自定义元素添加对优雅降级的支持感兴趣:扩展原生 HTML 标签的自定义元素和不扩展原生 HTML 标签的自定义元素。

自定义元素支持已嵌入平台的本地扩展元素(例如 <button> 、 <input> )。一种方法是使用 is句法。因此，如果您要扩展内置，我相信确保优雅降级的最直接方法是使用 is语法如下:<button is="my-button">而不是 <my-button></my-button> .

我可以看到它运行良好的一些示例是:

花式输入字段:

<input is="fancy-input" type="text" value="So fancy">

自定义视频播放器:

<video is="custom-player" src="amazeballs.mp4">

音乐可视化器:

<audio is="music-visualizer" src="track.ogg">

这样如果没有自定义元素的浏览器无法理解 is语法，正在扩展的元素仍应以降级的体验工作。

没有扩展特定内置的自定义元素呢？例如: <my-preload-animation> .

我一直采用的一种方法是在 Light DOM 中指定后备内容:

<my-preload-animation>
  Loading...
</my-preload-animation>

如果没有自定义元素支持的浏览器将标签解释为 HTMLUnknownElement ，回退(加载消息)仍将呈现。这(似乎)适用于简单元素。

对于更复杂的(例如，如果您在元素中使用 <content>/ <shadow>)，当我的自定义元素升级时，我会通过脚本删除回退。