Not sure if this is a Hugo or Goldmark Bug

support
1

Hi, I’ve been running into some issues using custom elements within my markdown (basically issues with blocks of raw HTML). As Goldmark seems to want to really make sure that that issues are not with Hugo, I’m asking here first …

Screen Shot 2020-09-03 at 15.51.50
Screen Shot 2020-09-03 at 15.51.501616×1676 483 KB

I’ve noticed that the HTML generated is not CommonMark compliant (as per the CommonMark checker and (this thread)[Custom elements not supported · Issue #239 · commonmark/commonmark-spec · GitHub]).

When my markdown is:

<custom-element>
    <div>This will be "slotted" into the custom element.</div>
</custom-element>

the resulting HTML is :

<p><custom-element></p>
  <div>This will be "slotted" into the custom element.</div>
</custom-element>

As per the spec, the expected behavior should be :

<custom-element>
  <div>This will be "slotted" into the custom element.</div>
</custom-element>

Note the lack of any <p> tags.

N.B.
As per the spec, if the MD was <custom-element></custom-element> (one line) the resulting HTML should be wrapped in <p> tags.

So, the basic question is, is this an issue with Hugo or Goldmark?

2

I cannot reproduce the problem with direct usage of Goldmark. This is a Hugo problem.

This will be wrapped in <p>...</p>:

<custom-element>
Foo
</custom-element>

This will not:

<div>
Foo
</div>

Commonmark shows neither should be wrapped with <p>...</p>.
See playground.

1 Like
3

Thanks! I’ve opened this issue.

4

Exploring workarounds, can you use a div with a data-foo attribute instead?

5

Maybe? Though it would be finicky and go against the spirit of custom elements.

As per MDN

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

I’m using LitElement if anyone is interested.

Some possible “workarounds” until bug is fixed :

  1. Wrap in <div>s (i’m using this, currently)
    : is not “flat”, but minimal
  2. Wrap in a shortcode which just outputs {{ .inner }}
    : simple, but mixing HTML and Go templating
  3. Have no line breaks in HTML in MD (entire thing wrapped in </p>)
    : works as expected, but confusing to write and sometimes things wrapped in <p> act in unexpected ways depending on your styling