I like svelte's structure of having the script tag at the top, the html and then the styles follow at the bottom. I think this structure makes the most sense and gets rid of unnecessary indentation. Something important when I have small vim windows all over the place.
I want to use this same structure for my petitevue projects and I think I will use this strategy. Unfortunately it isn't standard and browsers aren't guaranteed to parse it properly. Firefox, Chrome and large browsers will handle it fine but because it's part of the standard it gives me pause. This is a purely dev thing. I think at some point I may need to add a compile step like svelte where it will take my code and juggle into something standard.
However for now I don't want to add anything so I'm going to rely on the browser to handle my malformed html.
The structure I am currently using as Jan 2023:
<!DOCTYPE html>
<script type="module">
</script>
<html>
</html>
<style>
</style>
That doctype is a lie.