"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", p: "p", pre: "pre", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "In MDX, components can be seamlessly imported and rendered, which\nmeans you can wrap native web components in React and render them\nto an MDX document." }), "\n", _jsxs(_components.p, { children: ["It's important to note that ", _jsx(_components.a, { href: "https://reactjs.org/docs/web-components.html", children: "React and web components aren't 100% compatible" }), ",\nbut this will get you most of the way."] }), "\n", _jsxs(_components.p, { children: ["Firstly, you can create a web component that's wrapped with a\nReact component. The important piece is the ", _jsx(_components.code, { children: "useRef" }), " from React\nso that we can get a reference to the web component when it's\nmounted. This allows us to call its increment method."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React, { useRef } from 'react'\n\nclass Counter extends HTMLElement {\n constructor() {\n super()\n this.shadow = this.attachShadow({ mode: 'open' })\n this.currentCount = 0\n this.update()\n }\n\n update() {\n this.shadow.innerHTML = `

Count: ${this.currentCount}

`\n }\n\n increment() {\n this.currentCount++\n this.update()\n }\n}\n\nwindow.customElements.define('i-counter', Counter)\n\nexport const RenderCounter = () => {\n const counterElement = useRef(null)\n return (\n

\n \n \n

\n )\n}\n\nexport default () => \n" }) }), "\n", _jsx(_components.p, { children: "Now that we have a web component wrapped in a React component\nwe can use it directly in an MDX file." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mdx", children: "import WebComponent from './web-component'\n\n# Here's a web component wrapped with React in MDX!\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Web components aren't always a great fit when you're already\nworking in React, but if you have a bespoke need to render\na web component this is how you'd achieve it." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Web components in MDX