From 9d35c6bb2f55b74c0d46ecb5fc8f6fc2aaf3e139 Mon Sep 17 00:00:00 2001
From: n4n5 <git@n4n5.dev>
Date: Tue, 25 Nov 2025 03:20:34 +0100
Subject: [PATCH] Create web-component-in-mdx.mdx

---
 .../docs/recipes/web-component-in-mdx.mdx     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/content/docs/recipes/web-component-in-mdx.mdx

diff --git a/src/content/docs/recipes/web-component-in-mdx.mdx b/src/content/docs/recipes/web-component-in-mdx.mdx
new file mode 100644
index 0000000..18bf07e
--- /dev/null
+++ b/src/content/docs/recipes/web-component-in-mdx.mdx
@@ -0,0 +1,22 @@
+---
+title: Using web components in MDX
+astroRange: ^4.0.0
+---
+
+If you have a web component defined in a separate JavaScript file, you can include it in your MDX file by importing the script and adding a `<script>` tag with `type="module"`.
+The script will be executed on the client side.
+
+```js title="src/web-component.js"
+class MyEl extends HTMLElement { ... }
+customElements.define('my-el', MyEl);
+```
+
+Then in your `.mdx` file you can import it
+
+```mdx title="src/Page.mdx"
+import webComponent from "./web-component.js?url";
+
+<script src={webComponent} type="module"></script>
+
+<my-el />
+```