It solves many of the pain points Tether[0] tried to solve.

For example it helps when the anchoring element is inside of an oveflow hidden/scroll container, but geometrically you need the tethered element to sit/extend outside of the container (so—for now at least—its DOM node needs to be outside of the container).

[0] https://tetherjs.dev

Yes. Unless you want to rely on JavaScript libraries like popper and FloatingUI, we definitely need this for many use cases.

The simplest example is if you have content that it not contained by the box you're positioning against. Think tooltips, popovers, etc.

For some usecases like annotating content, this hugely simplifies things.

This always results in a ton of hacky JS to detect how the element should reposition itself if it overflows the screen (depending on the content and screen size)

This relies on being able to set the position relative to a parent selector, this doesn't work if the element you are positioning is not a descendant of the element you wish to anchor to.

That's fine for a lot of stuff. It becomes tricky to do certain other things. CSS-only tooltips are notoriously limited in scope.

Fundamentally no, html was fine. But hey it’s one fewer reason to reach for JavaScript, right?