From 017ca029fb148a51115edb12b7c8ccd49d2c52eb Mon Sep 17 00:00:00 2001
From: Chris Sauve <chrismsauve@gmail.com>
Date: Tue, 19 Nov 2024 16:55:55 -0500
Subject: [PATCH] Fix `slot` to be transmitted as an attribute, not a property
 (#465)

---
 .changeset/pink-dryers-fix.md                 |  6 +++++
 .../core/source/elements/RemoteElement.ts     |  2 +-
 packages/core/source/tests/elements.test.ts   | 26 +++++++++++++++++++
 .../source/host/hooks/props-for-element.tsx   |  2 +-
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pink-dryers-fix.md

diff --git a/.changeset/pink-dryers-fix.md b/.changeset/pink-dryers-fix.md
new file mode 100644
index 00000000..107cd756
--- /dev/null
+++ b/.changeset/pink-dryers-fix.md
@@ -0,0 +1,6 @@
+---
+'@remote-dom/preact': patch
+'@remote-dom/core': patch
+---
+
+Fix `slot` to be transmitted as an attribute, not a property
diff --git a/packages/core/source/elements/RemoteElement.ts b/packages/core/source/elements/RemoteElement.ts
index 816ec90a..8215cc2c 100644
--- a/packages/core/source/elements/RemoteElement.ts
+++ b/packages/core/source/elements/RemoteElement.ts
@@ -643,7 +643,7 @@ export abstract class RemoteElement<
       attribute === 'slot' &&
       (this.constructor as typeof RemoteElement).slottable
     ) {
-      updateRemoteElementProperty(
+      updateRemoteElementAttribute(
         this,
         attribute,
         newValue ? String(newValue) : undefined,
diff --git a/packages/core/source/tests/elements.test.ts b/packages/core/source/tests/elements.test.ts
index 1d815d84..1c85e3d7 100644
--- a/packages/core/source/tests/elements.test.ts
+++ b/packages/core/source/tests/elements.test.ts
@@ -788,6 +788,32 @@ describe('RemoteElement', () => {
       ]);
     });
 
+    it('automatically serializes the slot attribute without any additional configuration', () => {
+      const ProductElement = createRemoteElement();
+
+      const receiver = new TestRemoteReceiver();
+
+      const root = createRemoteRootElement();
+      const element = createElementFromConstructor(ProductElement);
+      root.append(element);
+
+      const slot = 'aside';
+      element.setAttribute('slot', slot);
+
+      root.connect(receiver.connection);
+
+      expect(receiver.connection.mutate).toHaveBeenLastCalledWith([
+        [
+          MUTATION_TYPE_INSERT_CHILD,
+          remoteId(root),
+          expect.objectContaining({
+            attributes: {slot},
+          }),
+          0,
+        ],
+      ]);
+    });
+
     it('reflects the value of a remote attribute automatically when the attribute is set', () => {
       const ProductElement = createRemoteElement({
         attributes: ['name'],
diff --git a/packages/preact/source/host/hooks/props-for-element.tsx b/packages/preact/source/host/hooks/props-for-element.tsx
index 52bcb4ef..540d2a8b 100644
--- a/packages/preact/source/host/hooks/props-for-element.tsx
+++ b/packages/preact/source/host/hooks/props-for-element.tsx
@@ -87,7 +87,7 @@ export function usePropsForRemoteElement<
 
   for (const child of children.value) {
     let slot: string | undefined =
-      child.type === 1 ? (child.properties.peek().slot as any) : undefined;
+      child.type === 1 ? (child.attributes.peek().slot as any) : undefined;
 
     if (typeof slot !== 'string') slot = undefined;