renderTemplate inside of markdown fails to render WebC component properly

[5t3ph]

Describe the bug
When using renderTemplate to allow a WebC component within a markdown page, the effect of markdown processing adds extra paragraphs and breaks the WebC rendering by kicking out the content.

To Reproduce

1. Create a basic WebC component with simple paragraph of content and a style block (scoped or not)
2. Create a markdown page to use for the component
3. Attempt to include the WebC component within the markdown file using renderTemplate

{% renderTemplate "webc" %}
<my-component></my-component>
{% endrenderTemplate %}

Expected behavior
my-component is replaced with the simple paragraph of content from the component.

Actual behavior
Element is no longer correctly replaced and is also wrapped in a paragraph, and WebC content is kicked out

Environment:

• OS and Version: Mac
• Eleventy Version: v2.0.0-canary.16

Additional context
Not being able to render in markdown is limiting for including WebC as enhanced features within blog/long-form content which is a popular way to use Eleventy.

[zachleat]

Hmmmmmmmmmm… I may need a reduced test case for this one. I created an automated test and could not get it to fail like you reported. Can you try to run the test I added to the repo locally?

https://github.com/11ty/eleventy-plugin-webc/tree/main/test/render-plugin

[zachleat]

Maybe related to #16! Please re-test after Eleventy WebC v0.7.0 is released! Likely in the next few days

[zachleat]

New versions are released! I’d love some help with a retest!

@11ty/eleventy@v2.0.0-canary.18
@11ty/eleventy-plugin-webc@0.7.0
@11ty/webc@0.7.1

[noahmpauls]

Edit: the issue of the processing step kicking out component content is fixed as of v2.0.0-canary.18. The below only applies to v.1.0.x.

---

Using new version of eleventy-plugin-webc, I can still reproduce the buggy behavior. Try modifying the existing test in the following way:

page.md (add webc:keep)

# Hello

{% renderTemplate "webc" %}
<my-component webc:keep></my-component>
{% endrenderTemplate %}

webc/my-component.webc (surround text with tag)

<h2>My component</h2>

Expected:

<h1>Hello</h1>
<my-component>
  <h2>My component</h2>
</my-component>

Actual:

<h1>Hello</h1>
<p>
  <my-component></my-component>
</p>
<h2>My component</h2>

In the above case, you can just omit webc:keep; this is mainly an issue in cases where webc:keep is implied, such as with components that include style/scripts. Try this same setup, but use this example component to observe the same behavior, which is unavoidable.

There is a workaround: wrap renderTemplate directives with another HTML element, which causes all the nesting to work as expected:

<span>
{% renderTemplate "webc" %}
<my-component webc:keep></my-component>
{% endrenderTemplate %}
</span>

This also works:

{% renderTemplate "webc" %}
<span>
  <my-component webc:keep></my-component>
</span>
{% endrenderTemplate %}

Tested with:
@11ty/eleventy@1.0.2
@11ty/eleventy-plugin-webc@0.8.0

[noahmpauls]

This is fixed in eleventy v.2.0.0! Although I am still seeing what I'd say is undesirable behavior (I would expect <my-component> to be the top-level element in the generated HTML):

Input:

# Hello

{% renderTemplate "webc" %}
<my-component webc:keep></my-component>
{% endrenderTemplate %}

Expected Output:

<h1>Hello</h1>
<my-component><h2>My component</h2></my-component>

Actual Output:

<h1>Hello</h1>
<p><my-component><h2>My component</h2></my-component></p>

The workaround from before (wrapping custom elements in another top-level HTML element) still works for now, but isn't ideal.

[cssandstuff]

The extra paragraph seems to be a general markdown2 thing which also has ongoing discussion: michelf/php-markdown#230

Maybe Eleventy/webc should filter out any wrapped p tags as part of {%renderTemplate "webc" %} ?

[dspint]

This occurs in this scenario as well (v2.0.1):

templateEngineOverride: md, webc seems to work as intended, rendering out html, markdown and webc content!
However, the webc component is wrapped with the same <p> tags as mentioned in this thread.

index.html (liquid template)

---
templateEngineOverride: md, webc
title: 'Test'
---

<h2>I'm created with html</h2>

## I'm created with markdown

<some-test></some-test>

some-test.webc:

<p>I'm a WebC component rendered into the page</p>

<script>
  console.log('test') // Just here to force the <some-test> element to render
</script>

Result:

<h2>I'm created with html</h2>
<h2>I'm created with markdown</h2>
<p><some-test></some-test></p>
<p>I'm a WebC component rendered into the page</p>
<p></p>

---

Also, using the same templateEngineOverride: md, webc in a .md file allows <some-test> to render without the need to wrap it in {% renderTemplate "webc" %}, however the component still renders the same with the wrapper <p> tags.

[chee]

i think this is still an issue even with eleventy 3 if you mention the component in-line.

renders right:

<some-button></some-button>

kicks the content out:

hello <some-button></some-button>!

workaround (renders some-button inline, doesn't kick out content):

<div/> hello <some-button></some-button>!

[elliot-nelson]

I'm experiencing a version of this same problem and I'm not sure if it's just broken, or if I'm using this feature totally wrong.

Context: I write all my blog posts in Markdown, and I'd like to use .webc files to insert "example snippets" of the code I'm talking about, here's an example of example1.webc:

<script>
    const canvas = document.getElementById('example1');
    const ctx = canvas.getContext('2d');
    canvas.width = 360;
    canvas.height = 200;

    ctx.fillStyle = '#ff0000';
    ctx.fillStyle = '#4b3b9c';
    ctx.fillRect(0, 0, 360, 200);
</script>

<canvas id="example1"></canvas>

<style>
    #example1 { border: solid 3px #00ff00; }
</style>

And then I want to insert it in my Markdown post, which apparently I need to wrap in a render call:

{% renderTemplate "webc" %}
<example1></example1>
{% endrenderTemplate %}

This works, but my <script> logic just disappears -- apparently bundled into some JavaScript block somewhere else -- but it never actually runs.

So then I try to force it to run, by adding webc:keep to the <script> tag -- this does render the <script> tag into the post, but it treats it like regular Markdown by inserting <p> elements in the middle of my JavaScript code, which of course results in invalid JavaScript.

Am I misunderstanding how to use WebC in this way?

[elliot-nelson]

One update: I finally found an example of what I'm trying to do, in the section https://www.11ty.dev/docs/languages/webc/#use-with-is-land :

		<!-- JS -->
		<script type="module" webc:keep>
			console.log("This JavaScript runs on:visible");
		</script>

As written, it works, but if you try adding a second line it all falls apart:

<script type="module">
    console.log("This JavaScript runs on:visible");
<p>console.log(&quot;Here is a second line&quot;);
</script>