What are the benefits of using element

I know that <dialog> element is not fully supported without polyfills, but still am curious what are the major benefits of implementing it? Semantics? I tried it and i found that it has issues (latest Chrome) with handling z-index in simple.show() mode (not .showModal() mode). For example by default .show() shows dialog under Leaflet OpenStreetMap. Sure, this is related to me and Leaflet... but i compare it to my default approach of creating dialogs/modals which is: i use <template> to create my dialog/modal content and when needed i clone/append it to document.body. This way NO MATTER WHAT, my last opened dialog is ALWAYS on top of anything else, so i have no z-index issues. Also, i found, that <dialog> element itself does not like display: flex/grid; So i should need to use dumb wrapper element. I am kinda person, who tend to use as less wrappers as possible to keep my DOM small and idea that dialog does not support grid/flex feels really bad. So what is the major benefits of using <dialog> in comparison of my <template>.append/.clone or any other method?