Using web components in MDX

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.

src/web-component.js

class MyEl extends HTMLElement { ... }
customElements.define('my-el', MyEl);

Then in your .mdx file you can import it

src/Page.mdx

import webComponent from "./web-component.js?url";

<script src={webComponent} type="module"></script>

<my-el />