優雅地降低自定義元素（或聚合物元素）

Question

許多開發人員一直想知道如何在自定義元素（或聚合物元素）中優雅地降解。這適用於不使用polyfills，不支持Web組件或者僅關閉JavaScript的用例。

有沒有人有這樣的想法？

Answer 1

我認爲這是合理的。這是大多數（不是全部）HTML元素的工作原理。查看過去的這次爆炸：http://code.tutsplus.com/tutorials/quick-tip-html5-video-with-a-fallback-to-flash--net-9982

Answer 2

有兩種類型的自定義元素，我們通常感興趣的是將對優雅降級的支持添加到：自定義元素擴展原生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"> 

如果沒有Custom Element的瀏覽器無法理解is語法，那麼正在擴展的元素應該仍然可以使用降級的體驗。

那麼您不擴展特定內置的自定義元素呢？例如：<my-preload-animation>。

一種方法我一直在服用這種在光明DOM指定後備內容：

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

如果沒有定義元素支持瀏覽器解釋標籤作爲HTMLUnknownElement，回退（加載消息）會仍然呈現。這（出現）適用於簡單的元素。

對於更復雜的元素（例如，如果您在元素中使用<content>/<shadow>），我會在升級自定義元素時通過腳本刪除回退。