Component's child elements get inserted into itself when using slots

[P-Froggy]

Affects:

• @11ty/eleventy@2.0.1
• @11ty/eleventy-plugin-webc@0.10.1

Currently, the child elements of a component's root get inserted into itself when using slots, so they get rendered twice:

test-component.webc:

<div webc:root>
  <div class="some-child-element">...</div>
  <div class="some-wrapper">
    <slot></slot>
  </div>
</div>

test-layout.webc:

...
<div>
  <test-component>
    <p>This should go into the slot</p>
  </test-component>
</div>
...

Gets rendered into:

...
<div>
  <div>
    <div class="some-child-element">...</div>
    <div class="some-wrapper">
      <div class="some-child-element">...</div>
      <div class="some-wrapper">
        <p>This should go into the slot</p>
      </div>
    </div>
  </div>
</div>
...

Correctly, it should be turned into:

<div>
  <div>
    <div class="some-child-element">...</div>
    <div class="some-wrapper">
      <p>This should go into the slot</p>
    </div>
  </div>
</div>
...

It doesn't matter if you youse webc:root or webc:root="override", a html-only or a javascript component, the problem still exists.

I'm a bit unsure why an issue wasn't created for this problem earlier, as it's quite obvious. It is also possible that the problem only occurs with me. Or am I doing something wrong here?

Note: I'm not using and haven't tested the webc plugin as a standalone but eleventy with the eleventy-webc plugin. However, I think the cause of the problem should be somewhere in this repository.

[darthmall]

I’m unable to reproduce the behavior you’ve described given the code snippets provided. When I create your test component and layout, and then create index.webc that uses the layout, the output I get is

<div>
  <test-component>
  <div class="some-child-element">...</div>
  <div class="some-wrapper">

    <p>This should go into the slot</p>

  </div>

</test-component>
</div>

Which is exactly what I would expect. I have a suspicion that there is additional context missing, so could you create a minimum reproduction of the problem in a repo somewhere we can clone and test? My suspicion is that you have a layout chain that uses @html="content" instead of @raw="content".

[P-Froggy]

Thank you very much for the quick help, using @html="content" instead of @raw="content" in a chained layout was exactly what caused the problem. However, I would never have come up with this idea on my own

No everything renders as expected. 👍