Frameright / Frameright/image-display-control-web-component

Enhanced behavior on old browsers

Open
#7 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.