trying to understand webc rendering on eleventy

[sombriks]

Hello everyone,

i was having issues to render webc components in scenarios where the webc file wasn't a page or a layout.

so i did a small test project and figured it out, but not quite completely.

Sometimes the component renders the tag used to name it:

<div><h1>Hello from the webc page</h1>
<p>you could use webc for everything</p>
<time-now class="w47deqpj8"><span id="now">19:42:57</span>
<!-- this script will be bundled -->
</time-now>
<a href="/">back</a></div>

Sometimes it doesn't:

<div><h1>Hello from the webc page</h1>
<p>you could use webc for everything</p>
<p>this component must be explicitly imported</p>
<a href="/">back</a></div>

And sometimes it renders the tag naming the component and the expected html:

<div>
<h1>Very cool content</h1>
<p><a href="/page2">Next page</a> | <a href="/page3">Another page</a></p>
<p><big-content attr="my very very cool content"></big-content></p>
<p class="big-content">my very very cool content</p>
<p></p>
</div>

I am trying to figure why it behaves the way it behaves in each scenario.

Any tip is welcome.

[darthmall]

When a component file contains nothing but HTML, WebC will remove the custom element tag and replace it with the HTML in the component file. If a file contains either a <script> or <style> tag, Eleventy leaves in the custom element. You can control this behavior using webc:keep and webc:nokeep.

https://www.11ty.dev/docs/languages/webc/#html-only-components