I think there's some major advantages to using :target pseudoselector to make modals work. It's nice to have no JS required and it's nice to have a no-CSS fallback immediately available for non-sighted users. It also requires a lot of extra CSS and some extra HTML to make the :target method work properly, and it will never support multiple modals at the same time (whether that's good UX or not is a different question).

Regarding the semantics of the <dialog> I agree with you in the case of my small example, but in a real-world setting you would absolutely need to put your <form> or <section> inside the dialog component to give it semantic value for screenreaders etc. Support for the <dialog> is growing, and I hope that as it grows in use + popularity we see it growing with features like - non-JS triggering, focus-trapping, screen-reader compatibility etc.

PS I cleaned up the example I used for the stock modal... it was copy pasta'd from bootstrap's example code - not something I wrote for the piece.