Question

许多开发人员一直在想如何在自定义元素（或Polymer元素）中处理优雅的降级。这适用于未使用polyfill，不支持Web Components或仅关闭JavaScript的用例。

有没有人想过如何做到这一点？

Answer 1

我们通常有两种类型的自定义元素可以添加对优雅降级的支持：扩展本机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>），我会在升级自定义元素时通过脚本删除回退。

Answer 2

我觉得这很合理。这是大多数（不是所有）HTML元素的工作方式。查看过去的爆炸：http://code.tutsplus.com/tutorials/quick-tip-html5-video-with-a-fallback-to-flash--net-9982

优雅地降级自定义元素（或Polymer元素）

2 个答案: