[esprehn]

This is really cool, I love seeing folks use CSS in clever ways. :)

My one feedback would be to avoid using attr selectors on the style attribute like [style*="--lqip:"]. Browsers normally lazy compute that string version of the style attribute [1], but if you use a selector like this then on every style recalc it'll force all new inline styles (ex. element.style.foo = bar) to compute the string version.

Instead if you use a separate boolean attribute (or even faster a class) it'll avoid that perf foot gun. So write <div lqip style="--lqip: ..."> and match on that.

[1] https://source.chromium.org/chromium/chromium/src/+/main:thi...

[cAtte_]

see also the author's last note on the upcoming parsing feature of `attr()`, which would solve both problems (performance and verbosity) at once:

    <img src="…" lqip="192900">

[cendyne]

I can't wait for the day when attr has this implemented. It would eliminate the need for so many inline styles

[miragecraft]

Is this really a performance concern though?