[ssr] Hydration on self closing tags with properties error

[aleespryker]

Description

If you have a component that contains elements with self closing tags and they have properties on them, hydration on them causes uncaught errors. It seems <!--lit-node x--> assumes the element it's intended for is its parent and not possibly its sibling in the case of self closing tags. The self closing tag may not be wrapped in another element, although I don't suppose the parent element in this case would be correct anyways.

Here's the offending line of code: https://github.com/lit/lit/blob/main/packages/lit-html/src/experimental-hydrate.ts#L161

Steps to Reproduce

1. Create a web component with an element with self closing tags (eg, an img tag) on the root level (so not wrapped in <div> tags, for example). Give the element a lit property.

2. Call hydration on the component on the client side, or use the experimental-hydrate-support version.

3. There's now an error in the console.

Live Reproduction Link

Stackblitz example

Expected Results

Element is hydrated on the browser side with no console errors.

Actual Results

There is a console error.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'hasAttribute')
    at hydrate (chunk-C2YYUDQW.js?v=532bb5dc:50:18)
    at MyElement.LitElement.update (lit_experimental-hydrate-support_js.js?v=5fe040d7:44:7)
    at MyElement.performUpdate (lit.js?v=5fe040d7:434:14)
    at MyElement.scheduleUpdate (lit.js?v=5fe040d7:398:17)
    at MyElement.__enqueueUpdate (lit.js?v=5fe040d7:391:25)

Browsers Affected

• [ ]x Chrome
• [ x] Firefox
• [x ] Edge

[augustjk]

Thanks for filing the issue! This was also reported here #2946 and fixed by #2952. Released in lit-html@2.2.5.