Skip to content

Feature Request: Allow Access to Parent Context in Single Tag Component Syntax #2822

Open
@FACHINA

Description

@FACHINA

Hello Symfony UX Team,

First, thank you for the great work on the UX Twig Components, which bring a much-needed modern templating experience to Symfony!

I'd like to propose a feature request or open a discussion regarding component context behavior:

Current Behavior

When using the single tag syntax for components (e.g. <MyComponent />), the component does not have access to the parent template’s context. This requires all needed data to be explicitly passed as props:

<MyComponent someProp="{{ someParentVar }}" />

However, when using the block/paired syntax, the content inside the component has access to the parent scope:

<MyComponent>
    {{ someParentVar }} {# This works #}
</MyComponent>

Feature Request

Would it be possible to make the parent context available (even optionally) to components rendered via the single tag syntax?

This would greatly improve ergonomics for smaller or frequently used components where repeating someProp="{{ someParentVar }}" can be verbose, especially when many variables need to be reused.

Considerations

I understand that component isolation is an intentional design choice, and I'm not suggesting full scope leakage. But perhaps a middle ground could be:

  • An optional flag on the component class or template to enable access to parent context in single tag mode.
  • A config-level opt-in for looser isolation (e.g., for internal projects where strict encapsulation isn't required).

Use Case Example

{# in template #}
{% set color = 'blue' %}
<MyComponent />
{# inside MyComponent.html.twig #}
<div style="color: {{ color }};">Hello!</div>

Currently, this only works if you pass color explicitly or use block syntax.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions