Elements bleed out when navigating with back/forward button #48
Comments
|
After some digging this is due to <button>
<div> Hello world</div>
</button> |
|
Sorry @baseplate-admin but this is an utterly massive and apparently complicated wall of text. Can you do me a favor and simplify this for me please and instead of screenshots of tons of code, can you reduce this down to it’s simplest form in a small/simple repo where I can reproduce please? Sadly I don’t have time to dissect this just to figure out if it’s really an issue with |
|
p.s. Here’s what I strongly recommend you do:
I always find that the more you can simplify/reduce the issue to its simplest components the easier it is to reason about and eventually solve (and importantly: communicate). Thanks! |
|
Yep thought so, my university opened so i have less time than before, please dont close this issue and i will see how to provide a stackblitz example |
|
No, please put in a repo that I can clone down and reproduce locally, especially since this one seems complicated. I prefer that over an online demo because I need to quickly reproduce it locally. It'll also to help you narrow it down to only the bare minimum required parts (and helps to weed out false alarms). Just to address this:
Ok... well just look at it from my perspective: I'm not a python dev and I'm obviously not familiar with your codebase. Since you probably thought this might be hard, that's a clue that this work needs to be done. Plus, to ensure folks help me help them as quickly as possible, I even outline this in the bug issue template (inspired by the main Svelte repo), i.e.
Just some advice. Not sure you needed it or anything but figured I'd put that out there for you. Again: Simpler is better and, since this is potentially complicated, a local repro is going to be important to help me understand it more deeply. |
|
Got it. I will put codes in a git repo |
|
Hey @baseplate-admin it's been a few weeks. Have you had a chance to work on or think about a more distilled proof of concept for this bug/issue that you're seeing? |
|
Hi, i am extremely sorry. University started and i am much busy with studies. I would love to help you with this but i fear i wont be able to until next month |
|
K no worries; I'm swamped as well by the very project that spawned the creation of |
|
@baseplate-admin i'd guess htmx is trying to add its saved state (the dom before you navigated away..) to the dom before the output of your custom element is even in the dom... so it does not find the location where to put the cached stuf... and just adds it to the Bottom of the Page.. it is really not the best idea to try to mess with the Dom of the custom element... which htmx would be doing in that case...but is not able because it runs before your custom element... that is my analysis by looking over your code and the vids for a little while... htmx is made for static html and a custom element is not static html... I'd not consider this as a bug in svelte-retag or svelte nore in htmx... you are trying to combine stuff that do not go together... Edit looked a little close it is the otherway arround... htmx is putting the renderd dom in place an then your custom element is messing up at some point... |
XD you are right, its a never seen before concoction.
Yes you are right on this (partially), all the API used by
I disagree on this. Because
I think it's a bug with
Yep you are on the right path. The rendered html is not being correctly processed by All in all i worked around this issue by not doing <button> <div></div> </button>I am sorry if i sound a bit rude. I am just a bit burned out today. |
|
Have you tried @baseplate-admin you said:
Can you break down high level why you think this? Just the broad strokes; what's your theory? Does this happen to custom elements (web components) which are being appended to the DOM asynchronously after page load? Is this affecting Also, to top all that off: Have you considered using shadow DOM instead? Maybe give that a shot as well and see how that works, since that should help encapsulate things a bit better.
While custom elements are "HTML in nature" (after all, they descend from That's why I think @spuky might be onto something here. My gut instinct is that if htmx is swapping content above a |
|
p.s. On that "HTML in nature" point, take the
It's not obvious looking at the light DOM here (which is all we can see) how the That's why I think if you tucked this into the shadow DOM, the results might be more aligned with what you expect. And if you cannot use the shadow DOM because you need content accessible to htmx, well... maybe therein lies the problem? Edit: p.s. I could be wrong about the implementation details of |
I think this is mostly the correct analogy, <svelte-retag>
<svelte-retag></svelte-retag>
</svelte-retag>I think this is un-fixable before addressing Yep you remind me of this issue, This was also causing an issue with layouts with @tokitouq you mentioned this issue, remember? |
|
Hey @baseplate-admin. That’s just a side effect. Do you have any details on root cause? Also, the core of my point is that this library doesn’t officially support outside libraries (i.e. those that are not part of the Svelte component, that is) modifying the contents of stuff inside of the custom element. It’s managed top down. That is, if HTMX is involved, fine, but as long as it’s not then reaching into the element. Adding elements that are svelte-retag elements might be ok (cannot guarantee it’ll work). Anyway, until you have details on a simple way to reproduce this bug so we can get into the root cause, then I’m not sure if there’s anything I can do here (myself). Obviously, PR’s are also welcome (but would come with the same quality standard, i.e. a root cause analysis with the proposed solution). |
|
Closing this for now since it’s stale (nearly a year old). Can open again if you find something in |
|
Thanks for investigating this issue |
Describe the bug
Hi, so when i navigate from one page to another, there is a severe bug that causes elements to mount in a different place from where it needs to be, ( code source )
screen-recorder-sat-dec-23-2023-10-40-07.webm
screen-recorder-sat-dec-23-2023-10-47-53.webm
So here's the function behind button clicks
Which in turn invokes ( refer to source )
Localstorage state :
Reproduction
Reproduction of this issue is a bit hard. Since running the project is not as simple ( i don't recommend running this at all )
git clone https://github.com/baseplate-admin/coreproject.gitcd backendnpm ipipx install poetrypipx ensurepathpoetry run poe devnpm run devhttp://127.0.0.1:9000/animeI will try to recreate this in stackblitz
Logs
No response
System Info
System: OS: Windows 11 10.0.22631 CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor Memory: 19.95 GB / 31.21 GB Binaries: Node: 21.4.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (120.0.2210.77) Internet Explorer: 11.0.22621.1 npmPackages: svelte: ^4.2.8 => 4.2.8 svelte-retag: ^1.5.2 => 1.5.2Severity
annoyance
The text was updated successfully, but these errors were encountered: