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
<div><navigation/></div>
index.js
function navigation() {
document.querySelector('navigation').replaceWith('<a href="...">...')
}
or maybe
let customnodes = {
navigation: '<a href="...">...',
...
}
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:
function navigation() {
return '<a href="...">...'
}
and the iterator would wrap that function with the appropriate document.querySelector('navigation').replaceWith call.
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.
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.