Skip to content

Self-closing hyphenated shortcoded tag is different when not void #755

@valse

Description

@valse

Subject of the issue

Hi, I'm dealing with a strange behavior: if I set a shortcode like this:

const shortcodes = {
 "cc-image": Image,
}

<MDXProvider components={shortcodes}>
   <MDXRenderer>{data.post.body}</MDXRenderer>
</MDXProvider>

and I use it self-closed

# Title

Paragraph

<cc-image />

the rendered html is like:

<h1>Title</h1>
<p>Paragraph</p>
<div class='image'></div>

if I use the same component but not self-closed, the final html include an extra wrapper paragraph for the component itself:

# Title

Paragraph

<cc-image></cc-image>

the rendered html is like:

<h1>Title</h1>
<p>Paragraph</p>
<p>
   <div class='image'></div>
</p>

Expected behaviour

Even if not self-closed the component must not be wrapped in an extra paragraph.

I don't know why but it happens only if the shortcoded tag includes an hyphen :-/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions