[labs/ssr] Implement SSR custom elements event handling#4755
[labs/ssr] Implement SSR custom elements event handling#4755
Conversation
🦋 Changeset detectedLatest commit: 8dc7b3d The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Over the weekend I realized that this implementation will not work, if a consumer uses their own polyfill for Discussed via call; Accepted for now. |
|
@justinfagnani @sorvell Thanks again for your reviews and time. As discussed during our last call, I added tests and comments. Please have another look. Open topics in my mind:
|
|
About the slot nesting; I simply forgot about white space with unnamed slots... |
4f195c1 to
56c9559
Compare
|
@justinfagnani @sorvell I have added the discussed tests (and found a bug with the nested slot case) and rebased the branch on main. I have renamed the global property to |
sorvell
left a comment
There was a problem hiding this comment.
Just a couple questions, very close!
| renderInfo.eventTargetStack | ||
| ) as HTMLElementWithEventMeta; | ||
| const slotName = getLast(renderInfo.slotStack); | ||
| (instance.element as HTMLElementWithEventMeta).__eventTargetParent = |
There was a problem hiding this comment.
Would this mean that in the case the elements are not slotted, a sibling's parent node would be incorrectly set to its previousElementSibling?
There was a problem hiding this comment.
Sorry, I'm not sure I fully understand what you mean? Could you elaborate?
There was a problem hiding this comment.
it will default to eventTarget, which is the result of getLast(renderInfo.eventTargetStack) - can that end up being the previous element sibling?
There was a problem hiding this comment.
Ah, I think I understand now what is meant.
No, because the entry is removed with the closing of the custom element or slot element down below.
|
@sorvell Thank you for the review. Feel free to contact me via Discord, if you would like to discuss the open topics it in person. |
df6bacb to
0e5330e
Compare
justinfagnani
left a comment
There was a problem hiding this comment.
Thanks so much for your work an patience here!!
874ab41 to
8dc7b3d
Compare
This PR implements limited event handling for custom elements, by shimming
EventTarget(with methodsaddEventListener,removeEventListeneranddispatchElement) which is now extended by theHTMLElementSSR shim. It only considers and allows event handlers and event dispatching on custom element instances (e.g. event handlers in a html...template will not break, but also not work with SSR). Due to the streaming nature of SSR, it will also not allow mutating the parent from a child for rendering. This primarily enables a use case like@lit/context.It works by building a minimal DOM tree on server side, which only considers custom element instances and slot elements, to respect the event path including Shadow DOM. The event properties are patched during the
dispatchEventcall, to more accurately reflect the state of the event.This PR also adds a global flag to run
connectedCallback(andhostConnectedon registered controllers) with SSR, which can be enabled withglobalThis.litSsrCallConnectedCallback = true.Additionally, a global property
globalThis.litServerRoothas been implemented, which can be used as an alternative fordocument.documentElementordocument.bodyto register global event handlers (e.g. for@lit/context ContextProvider).Closes #3301
Closes #3365