> marquee tags were a missed opportunity to implement horizontal scrolling often used on shopping websites. Now it uses JS to achieve the same.
I have been trying to find other more commonly known UI patterns that could be done natively.
Are you sure you are talking about the functionality of the marquee tag? What exactly do you mean by "implement horizontal scrolling often used on shopping websites. Now it uses JS to achieve the same"?
For a banner-type text "Sale: 50% off until New Year" I can imagine this. And this is possible with almost no JS, by using a CSS animation on translateX. I think you need to pass the initial width of the content one time from JS to CSS via a custom property IIRC, and update that variable on resize, for example using a ResizeObserver, to avoid a jump when reaching the "wrap around"...
But – sorry if this a misunderstanding – I have a sneaking feeling that you might also have things in mind like swipable horizontal lists etc?
This is also possible using CSS in theory (scroll-snap and overflow-auto, and CSS to hide the scrollbars). But last I tried to use it, it simply wasn't good enough to sell it, compared to a fat JS library that did the trick, perfectly, on mobile and desktop.
When it comes to UX niceties, I feel it's pretty common to have HTML+CSS solutions that are good enough in theory, but suck in practise.
For the horizontal scrolling with "snap", I would also like a good JS-free solution. But I feel that the more interactive and complex the UX patterns become, it would be senseless bloat to build a specific implementation into the platform.
I think that "autocomplete" inputs are a good example for this, as discussed in another thread.
I once tried to implement a custom autocomplete using datalist (including dynamically updating the list with xhrs). In the end, the native element had so many issues that it was a waste of time and a JS solution was way better. At the time, that JS solution was Alpine.Js, because it was a b2b app with minimal a11y requirements and JS-allergic developers.
Within an hour, I was polishing keyboard use while the "near-native" solution using datalist was broken in a thousand different ways in every browser and in the end didn't work well at all.