Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/content/docs/recipes/web-component-in-mdx.mdx
Original file line number Diff line number Diff line change
@@ -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 />
```