eleventy-plugin-webc
eleventy-plugin-webc copied to clipboard
Cannot pass down properties when nesting components
Context
I would like to have an ‘outer’ WebC component that takes a property foo
and inside its markup it refers to another, ‘inner’ WebC component, which has a slot. I want to pass on the value received for the property foo
in the outer component to the inner component’s slot.
MWE
I attempted this the following way.
content/index.webc
:
<h1>Test page</h1>
<outer-comp @foo='lorem ipsum'></outer-comp>
_components/outer-comp.webc
:
<h2>Outer Component</h2>
<inner-comp @text=foo></inner-comp>
<style webc:scoped>
h2 {
text-decoration: underline;
}
</style>
_components/inner-comp.webc
:
<h3>Inner Component</h3>
<p>Slot content below</p>
<slot>[DEFAULT]</slot>
<style webc:scoped>
:host {
display: block;
max-width: 600px;
border: 1px solid red;
}
</style>
Expected Output
I would expect the text lorem ipsum
to be displayed in the red box of inner-comp
, since outer-comp
passes the value of foo
to the special @text
property that should set the content between the inner-comp
tags.
Something like:
Test page
Outer Component
+----------------------+
| Inner Component |
| |
| Slot content below |
| |
| lorem ipsum |
+----------------------+
Actual Output
The slot remains empty.
Interestingly, it seems to be set empty explicitly, as the default slot content ([DEFAULT]
) is not displayed.
Test page
Outer Component
+----------------------+
| Inner Component |
| |
| Slot content below |
| |
+----------------------+
Am I misunderstanding or doing something wrong? If this is a bug, what workaround could I seek? Thanks in advance.