I realize JS might not be to everyone's taste, but I think I've found the absolute minimal JS solution to reuse headers and footers: https://vladimirslepnev.me/write It's almost exactly like PHP but client side, there's no "flash of content" at all.
That'll work but you'll get flash of content I think. (Or layout shift, idk what's the right name for it.) The way I did it, the common elements are defined in common.js and inserted in individual pages, but the insert point is an inline script calling a function, not a div with specific id. Then the scripts run during page load and the page shows correctly right away.
As the article states, this is analogous to php echo. But this thread is about php include: how does it help there?
Edit: I see; you use it as a template further down. My bad for not reading through.
that's neat. i don't like inline js though. i'd like to be able to load it from a separate file so that i can reuse it on multiple pages.
i am thinking of something like
index.html
index.js or maybe then add a function that iterates over customnodes and makes the replacements. even better if i could just iterate over all defined functions. (there is a way, i just didn't take the time to look it up) then the functions could be: and the iterator would wrap that function with the appropriate document.querySelector('navigation').replaceWith call.