Skip to content

No access to host component properties within slotted content  #214

Open
@renekaesler

Description

@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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions