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

Question

许多开发人员一直在想,应该如何在自定义元素(或Polymer元素)中实现优雅的降级.这适用于未使用polyfill,不支持Web Components或仅关闭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>),我在升级自定义元素时通过脚本删除了回退.

Answer 2

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