[mdx-loader] How to use HTML in markdown (original: how to bypass web components in markdown files?)

[JounQin]

There is only document about Web components in MDX: https://johno.com/web-components-in-mdx

When I developed a web component named onii-quil, I want to use it in markdown:

<onii-quil></onii-quil>

It renders as <p></p> unexpectedly.

I haven't found any solution to bypass <onii-quil></onii-quil> as-is.

[ChristianMurphy]

From the discussion in #2100
I gather that passing a components prop with {"onii-quil": "onii-quil"}
Should work.

[JounQin]

I'm still confusing where should be

passing a components prop with {"onii-quil": "onii-quil"}

Maybe you mean https://mdxjs.com/table-of-components/#components?

I tried with

<Readme components={{ 'onii-quill': 'onii-quill' }} /> 

<!-- READMD.md -->

## Demo

<onii-quill />

But it seems not working.

Readme is a markdown file, not mdx.

[wooorm]

I gather that passing a components prop with {"onii-quil": "onii-quil"}

That discussion is about how such code was internally generated wrongly before, leading to a crash. It is now generating that code properly.
But it’s not needed to pass this as a user!

[wooorm]

<onii-quill /> is not HTML. It’s JSX. If you have markdown, markdown supports HTML, and it won’t support JSX.

For <onii-quil></onii-quil>, CommonMark describes your behavior: https://spec.commonmark.org/dingus/?text=%3Conii-quil%3E%3C%2Fonii-quil%3E. If that is what the loader results in, it is correct.
If you want to write it so that the paragraph doesn’t show up, put the opening and closing tag on two lines to get “condition 7” (what I call “complete HTML”) https://spec.commonmark.org/0.30/#html-blocks.
I have in the past found this condition a bit too strict. I can imagine, like you, that a closing tag should be allowed to follow the opening tag. You could raise an issue with CommonMark about this.

If things are disappearing, well, they shouldn’t. Please provide more info so I can help debug your code.

[wooorm]

HTML in markdown is a black box. It is invalid HTML. It is XML-like garbage. It’s impossible to “parse” and pass to React.

[JounQin]

By adding rehypePlugins: [(yield import('rehype-raw')).default, {passThrough: nodeTypes}], it works!!

[JounQin]

I think this is worth to document like https://johno.com/web-components-in-mdx

[wooorm]

Yeah. Maybe. Not a lot of people are using MDX with plain markdown yet. Particularly then with HTML in markdown.
And MDX is kind of the better alternative for this. Your using MDX but not using all the magic it adds, instead, you’re now duplicating the code with a different parser.
I’m not sure about when this is a great idea

[JounQin]

And MDX is kind of the better alternative for this. Your using MDX but not using all the magic it adds, instead, you’re now duplicating the code with a different parser.
I’m not sure about when this is a great idea

I'd prefer README.md instead of README.mdx while can be read easily on GitHub, although custom components will be hidden in this case.