[Lit] Fix hydration not having the same reactive values as server (#6080)

* Fix lit hydration not having the same reactive values

* add changeset

* add clientEntrypoint to package exports

* update tests

* add changeset

* only add defer-hydration when strictly necessary

* remove second changest

* fix test typos

1 files changed, 11 insertions, 3 deletions

diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
index 83737c183..48a3c646f 100644
--- a/packages/integrations/lit/server.js
+++ b/packages/integrations/lit/server.js
@@ -36,10 +36,18 @@ function* render(Component, attrs, slots) {
 
 	// LitElementRenderer creates a new element instance, so copy over.
 	const Ctr = getCustomElementConstructor(tagName);
+	let shouldDeferHydration = false;
+
 	if (attrs) {
 		for (let [name, value] of Object.entries(attrs)) {
-			// check if this is a reactive property
-			if (name in Ctr.prototype) {
+			const isReactiveProperty = name in Ctr.prototype;
+			const isReflectedReactiveProperty = Ctr.elementProperties.get(name)?.reflect;
+
+			// Only defer hydration if we are setting a reactive property that cannot
+			// be reflected / serialized as a property.
+			shouldDeferHydration ||= isReactiveProperty && !isReflectedReactiveProperty;
+
+			if (isReactiveProperty) {
 				instance.setProperty(name, value);
 			} else {
 				instance.setAttribute(name, value);
@@ -49,7 +57,7 @@ function* render(Component, attrs, slots) {
 
 	instance.connectedCallback();
 
-	yield `<${tagName}`;
+	yield `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`;
 	yield* instance.renderAttributes();
 	yield `>`;
 	const shadowContents = instance.renderShadow({});