Enhanced behavior on old browsers

[lourot]

In order to better deal with older browsers, these two mechanisms could be implemented.

1. Legacy+data attribute pairs, e.g. src= + data-src=

<img src="fallback-pic-on-old-browser.jpg" data-src="pic-with-regions.jpg">. If web components are supported by the browser, our component's constructor kicks in and copies the content of data-src= to src=. If the component later gets manually disabled, it will restore the original src= value. We can imagine the same behavior for other attributes, like srcset= and sizes=.

2. CSS class marking well-functioning components

If web components are supported by the browser, out component's constructor kicks in and adds the image-display-control-supported CSS class. The user could then use such a stylesheet in their project:

img[is="image-display-control"] {
  border: 1px solid green;
}

img[is="image-display-control"]:not(.image-display-control-supported) {
  display: none;
}