Open DrSensor opened 2 years ago
Apparently rather than patching \<head> and replacing \<body>, I just need to add is="{tag}-scope"
attribute on each tag then swap all childNodes with the next page. This mean slot
attribute/element can be used to prevent script being executed as well as an identifier for styling specific elements that are came from custom page transition. That styling can be done via ::slotted()
selector.
Surprise...! Safari/WebKit didn't support is=
attribute 🥲
Maybe I should use .firstChildElement as fallback
<quick-link><a href="next.html">next</a></quick-link>
which transform into
<quick-link href=next.html>next</quick-link>
before applying the main logic
💡 Tip: just move Attr and Text node from .firstChildElememt into parent/host
Finally found a better name 😅
I'm thinking for <quick-link>
to:
<a href="">
href=""
, else just return HTMLElementothers yet same:
No need to keep and track the scroll position since it can be solved by re-structuring the page to utilize #29
Inspired from flamethrower but rather than intercepting the default click event handler in HTMLAnchorElement (
<a>
), you must be explicit which link that cause SPA navigation.No
<render-scope>
is necessary