WebComponents provides rich extra UI components for websites.
You can create original HTML tags with Custom Elements API, or introduce external Javascript libs.
Libs will be distributed as a separate JS files, and sometimes network error disrupts building Custom Elements on rendering.
CSS for Not upgraded Custom Elements
Custom Elements like <md-button></md-button> have its own definition.
When missing libs loaded, they are just inline or block plain elements.
For this case, custom tags can still be decorated with CSS.
md-button:not(:defined) {
background-color: lightgray;
}
md-button[disabled]:not(:defined) {
opacity: 0.3;
}
:not(:defined) is the idiom selecting broken or not ready Custom Elements.
You can implement graceful degradation with this way.
Even <md-button> looks like upgraded <button>, it actually fallbacks to <span> like elements when broken. So, you will want to have disabled decoration, too.
Degraded simulation
For testing degraded Custom Elements, you can simulate the situations simply with HTML excluding WebComponents JS libs.
Degraded behavior varies by component types. Buttons should have degraded styles, icons should disappear, modals cannot work at all, and so on.
JS load error is not a common case, so effective degraded behavior is your design issue.
Chuma Takahiro
Related articles
