Z wdziękiem degradując element niestandardowy (lub element polimerowy)

Question

Wielu programistów zastanawiało się, jak należy postępować w przypadku elementów niestandardowych (lub elementów polimerowych). Dotyczy to przypadków użycia, w których nie są używane żadne z nich, Komponenty internetowe nie są obsługiwane lub JavaScript jest po prostu wyłączony.

Czy ktoś myśli o tym, jak to zrobić?

Answer 1

Myślę, że to rozsądne. Tak działają większość (nie wszystkie) elementy HTML. Sprawdź ten wybuch z przeszłości: http://code.tutsplus.com/tutorials/quick-tip-html5-video-with-a-fallback-to-flash--net-9982

Answer 2

Istnieją dwa typy niestandardowych elementów, które zwykle są zainteresowane dodaniem obsługi udoskonalonej degradacji do: elementów niestandardowych, które rozszerzają rodzime znaczniki HTML i elementy niestandardowe, które nie zawierają.

Elementy niestandardowe obsługują natywnie rozszerzanie elementów już wypalonych na platformie (np. <button>, <input>). Jednym ze sposobów na to jest użycie składni is. Tak więc, jeśli rozszerzasz wbudowane, uważam, że najbardziej bezpośrednią metodą zapewnienia pełnej degradacji jest użycie składni is w następujący sposób: <button is="my-button"> zamiast <my-button></my-button>.

Kilka przykładów, gdzie mogę zobaczyć to działa dobrze to:

Fantazyjne pola wejściowe:

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

Niestandardowe odtwarzacze wideo:

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

Muzyka wizualizacje:

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

W ten sposób, jeśli przeglądarka bez elementu niestandardowego nie może zrozumieć składni is, rozszerzany element powinien nadal działać z pogorszeniem jakości.

Co z elementami niestandardowymi, w których nie rozszerzasz konkretnego wbudowanego? Na przykład: <my-preload-animation>.

Jedno podejście Byłem biorąc to jest określenie zawartości awaryjnej w świetle DOM:

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

Jeśli przeglądarka bez wsparcia klienta Element interpretuje tag jako HTMLUnknownElement, w awaryjnej (wiadomość uruchamiająca) będzie nadal być renderowane. To (pojawia się) działa dla prostych elementów.

Dla bardziej złożonych (np. Jeśli używasz w swoim elemencie elementu <content>/<shadow>), usuwam kreację rezerwową przez skrypt, gdy mój element niestandardowy zostanie uaktualniony.