Chrome just added CSS Anchor Positioning this year. The other browsers also expressed interest in implementing it, with Firefox having announced an Intent to Implement. The feature would likely be available on all major browsers sometime next year.
Reddit is actually undergoing a rewrite for their web frontend, which now heavily uses web components using lit. You can try it by accessing sh.reddit.com or using reddit without logging in.
Reddit is a company that seems to be chasing trends not understanding what they are.
I fully expect their site to become the same mess as their previous React re-write. I mean, it already is. There are people arguing that 2 seconds to load text and images is fast, actually: https://twitter.com/addyosmani/status/1678117107597471745 ("Engineering Leader, Google Chrome"). And they already load 109 JS files to display it.
Wow, this is actually way faster than new.reddit.com. I may try it out over old.reddit.com. There is obviously a difference in that it emphasizes media content with large cards instead of the more dense old.reddit.com but that is preferable for some content. I'll have to see how it feels with more use.
The only major problem I noticed is that the "comments" button wasn't a link so you couldn't open it in a new tab. I don't know why web devs hate real links. They think the only think you can do with a link is click it to open the target page.
Google libraries are a different story compared to their software products. AngularDart is hardly used outside of Google that it's practically dead and no longer maintained for use externally. However it's alive and well inside Google and still have internal releases within the company. Since Flutter is heavily used outside as well as inside, Google will have to consider the man-hours of rewriting everything Flutter has touched in order to decide dropping it, which means never basically. So even if Flutter is dropped by the community using it, it would still be maintained by Google for their internal use.
There is a library that would allow you to declare functional components, however it relies on code generation which might discourage others from using it. Dart is planning on adding static metaprogramming though, and that might provide a way to introduce functional components to Flutter without codegen.
It has a pretty good accessibility story for it's built-in widget set (Material and Cupertino). However, if you want to create a new Widget that does not depend on the built-ins but still provide a11y, you can wrap it using the Semantics[1][2] widget.
It will be interesting to see if anyone besides Canonical takes steps to provide Linux hooks for their Flutter apps. It'd be very interesting to see Canonical also try to release some of their apps on other platforms too! That could be a thing!
You seem you have a hate boner for CanvasKit. It's just a Skia project that Flutter uses as one of its render targets. It's main use is to provide a better Canvas painting API than what browsers offer natively.
I do quite dislike those who substitute out the HyperText Markup Language for big giant moving pictures, yes. Having my rich media replaced by extremely dumb media that I cannot deploy extensions against is, imo, a colossal downgrade & deeply deeply injurious to civilization, a severe & critical regression against information's usability & utility.
I believe the Stadia app is the only mainstream Google iOS app that is written in Flutter. The rest are native apps (Swift/Objective C) but specifically implements Material design.
So here's how your example would work using it:
.outer { width: 100%; height: 400px; background: aliceblue; anchor-name: --outer; }
.left { width: 100px; height: 100px; background: white; position: absolute; position-anchor: --outer; left: anchor(left); align-self: anchor-center; }
.center { width: 150px; height: 200px; background: pink; position: absolute; position-anchor: --outer; justify-self: anchor-center; align-self: anchor-center; }
.right { width: 160px; height: 150px; background: gray; position: absolute; position-anchor: --outer; right: anchor(right); align-self: anchor-center; }
Source: https://developer.chrome.com/blog/anchor-positioning-api