diff --git a/docs/src/routes/plugins/component/+page.svelte b/docs/src/routes/plugins/component/+page.svelte
index b3211fa1..3ebe9aa0 100644
--- a/docs/src/routes/plugins/component/+page.svelte
+++ b/docs/src/routes/plugins/component/+page.svelte
@@ -35,6 +35,11 @@
 
 <Code code={data.codeBlocks.extension} />
 
+<p>
+	Attributes of the matched element are passed to the component as props, using hast property names:
+	for example, <code>data-item-id="1"</code> is available as the <code>dataItemId</code> prop.
+</p>
+
 <h3>Custom logic</h3>
 
 <p>You can use custom logic when selecting which nodes to map:</p>
diff --git a/packages/plugin-component/package.json b/packages/plugin-component/package.json
index 441112a0..511b6444 100644
--- a/packages/plugin-component/package.json
+++ b/packages/plugin-component/package.json
@@ -67,6 +67,7 @@
 	],
 	"dependencies": {
 		"esm-env": "^1.0.0",
+		"property-information": "^7.0.0",
 		"rehype-parse": "^9.0.0",
 		"unist-util-visit": "^5.0.0"
 	}
diff --git a/packages/plugin-component/src/lib/svelte.ts b/packages/plugin-component/src/lib/svelte.ts
index d6f9c6dd..ea3e4c72 100644
--- a/packages/plugin-component/src/lib/svelte.ts
+++ b/packages/plugin-component/src/lib/svelte.ts
@@ -3,6 +3,7 @@ import { mount, type Component } from 'svelte';
 import { render } from 'svelte/server';
 import type * as hast from 'hast';
 import { BROWSER } from 'esm-env';
+import { find, html as htmlSchema } from 'property-information';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
 import { EXIT, visit } from 'unist-util-visit';
@@ -114,12 +115,13 @@ export const initializeComponents = (
 			continue;
 		}
 
-		const props = Array.from(placeholder.attributes)
-			.filter((attr) => attr.name !== 'data-component')
-			.map((attr) => ({
-				[attr.name]: attr.value
-			}))
-			.reduce((acc, curr) => ({ ...acc, ...curr }), {});
+		// Use hast property names, so that components receive the same props
+		// on the server and on the client (e.g. `data-item-id` -> `dataItemId`).
+		const props: Record<string, string> = {};
+		for (const attr of Array.from(placeholder.attributes)) {
+			if (attr.name === 'data-component') continue;
+			props[find(htmlSchema, attr.name).property] = attr.value;
+		}
 
 		const wrapper = document.createElement('div');
 		wrapper.setAttribute('data-mounted-component', id);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e27a9fc8..41c46680 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -384,6 +384,9 @@ importers:
       esm-env:
         specifier: ^1.0.0
         version: 1.0.0
+      property-information:
+        specifier: ^7.0.0
+        version: 7.0.0
       rehype-parse:
         specifier: ^9.0.0
         version: 9.0.0