No access to host component properties within slotted content

[renekaesler]

It is not possible to access the properties of the host component within a slot of another component. According to HTML behavior, slotted content belongs to the context of the host component. Properties should therefore also be available within slotted content.

version: 0.11.4 maybe related: Issue 205

Example

<!-- components/c-faq.webc -->
<c-section :@title="title">
  <details webc:for="question of questions">
    <summary @text="question.question"></summary>
    <p @text="question.answer"></p>
  </details>
</c-section>

Related Files

<!-- components/c-section.webc -->
<section>
  <h1 @text="title"></h1>
  <slot></slot>
</section>

<!-- index.webc -->
<c-faq 
  @title="Frequently Asked Questions" 
  :@questions="[
    { question: 'Question #1', answer: 'Answer #1' },
    { question: 'Question #2', answer: 'Answer #2' },
    { question: 'Question #3', answer: 'Answer #3' },
  ]"
></c-faq>

// index.js
import { WebC } from "@11ty/webc";

const page = new WebC();

page.setBundlerMode(true);
page.setInputPath("index.webc");
page.defineComponents("components/*.webc");

const { html } = await page.compile();

console.log(html);

Expected Behavior

The Example should compile to:

<section>
  <h1>Frequently Asked Questions</h1>
  
  <details>
    <summary>Question #1</summary>
    <p>Answer #1</p>
  </details>
<details>
    <summary>Question #2</summary>
    <p>Answer #2</p>
  </details>
<details>
    <summary>Question #3</summary>
    <p>Answer #3</p>
  </details>

</section>

Actual Behavior

The example compiles to:

<section>
  <h1>Frequently Asked Questions</h1>
  
  [object Object]

</section>

Workaround

If we pass :@questions="questions to the component, we can achieve the expected result.

<!-- components/c-faq.webc -->
<c-section :@title="title" :@questions="questions">
  <details webc:for="question of questions">
    <summary @text="question.question"></summary>
    <p @text="question.answer"></p>
  </details>
</c-section>