Frameright / Frameright/image-display-control-web-component
Enhanced behavior on old browsers
- Dominant language
- TypeScript
- Stars
- 18
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
In order to better deal with older browsers, these two mechanisms could be implemented.
### 1. Legacy+data attribute pairs, e.g. `src=` + `data-src=`
`
`. 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:
```css
img[is="image-display-control"] {
border: 1px solid green;
}
img[is="image-display-control"]:not(.image-display-control-supported) {
display: none;
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the web component constructor and its manual-disable path, then read how attributes are currently handled. Done means supporting legacy/data attribute pairs such as src and data-src, restoring the original value when disabled, and adding the image-display-control-supported class for supported components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100