How to use recursive (self-nested) WebC components?

[Zearin]

TL;DR

A WebC component that can optionally contain itself (much like a ul can contain other uls) is not generating the nested elements correctly.

Since the docs state that “WebC is HTML”, I did not expect a WebC component that is basically a glorified ul to have this issue with nesting.

I am still learning subtleties of how data flows through WebC components, and it’s possible I’m missing something obvious.

(Added in Edit) Steps To Reproduce

1. Checkout Zearin/webc-org-nested-depts
2. Run npm i
3. Run npm start

Test repo demonstration

https://github.com/Zearin/webc-org-nested-depts

The Components

I have a simple project where there are 3 components (all HTML-only). 2 of the 3 are special-case <ul> elements, and the last one is a special-case <li> element.

Components

```html

``` ```html

>

``` ```html

```

The Problem

• ✅ The top-level list generates fine;
• ✅ Each top-level dept generates tag-list fine; but
• ❌ Any nested dept-list are not generating as they should.

Since these are all HTML-only components, I expected no custom elements to exist in the output.

Instead, the nested dept-list elements are generating as empty <dept-list></dept-list> elements. (Added in edit) Here is an example of the problem output.

[Zearin]

@zachleat, @5t3ph, or @darthmall: I’ll gladly buy a coffee or three via sponsorship (of your choice) if someone can help me figure this one out!

[sc0ttes]

Hey @Zearin,

I'm also figuring out webc right now so this may not be a valid answer but wouldn't the code snippets above create an infinitely recursing list since dept.webc relies on dept-list.webc and vice versa?

Additionally, looking at your repo, appears there's a typo here though I have no idea if that would make any difference.

[Zearin]

Hi @sc0ttes,

No, it wouldn’t create an infinite loop because the data is not infinitely nested. I think it’s 2 or 3 levels deep at the most.

I appreciate your catching the typo, though! Thanks 🙏 ✅Fixed!

[stevenwoodson]

I've also come across this same scenario with @11ty/webc 0.11.0 and @11ty/eleventy-plugin-webc 0.11.1

Assuming since there's no follow up that you've not figured this one out yet right @Zearin?

[Zearin]

Alas! No. No luck on my end. :)

[maxdhn]

Hi @Zearin, I'm facing the same issue, and it seems to be intentional behavior by the author (see ast.js). Unfortunately, self-nesting components are mandatory for our project. Do you have a workaround or perhaps another product to recommend ?

[Zearin]

@maxdhn Alas, I haven't used WebC in months because of this issue. ☹️

[Zearin]

@maxdhn Forgot to mention: I found this ebook incredibly helpful and informative in rolling my own web components (and easier than adopting another library).