Attributes are shared between sdc instances

Does this still happen if you use the only keyword in your include statements https://twig.symfony.com/doc/3.x/tags/include.html

Either {% include 'template.html' with {'foo': 'bar'} only %} or {{ include('template.html', {foo: 'bar'}, with_context = false) }} help to mitigate the issue.

Namely:

{{ include('olivero:test', { my_classes: ['class-1', 'class-2']}, with_context = false) }}

{{ include('olivero:test') }}

{{ include('olivero:test', with_context = false) }}

The second and third include won't have the classes of the first.

{{ include('olivero:test', { my_classes: ['class-1', 'class-2']}) }}

{{ include('olivero:test') }}

{{ include('olivero:test', with_context = false) }}

The second include will have the class of the first, the third won't have them.

I'm saying mitigate because:

• the context is passed by default, so it this sdc's attribute behavior is considered a good pattern and not a bug, it should at be at least documented
• relying on disabling the context force to pass props naturally available. For example, I discovered this behavior while placing multiple instance of the same sdc inside user.html.twig, where I am using the user variable, already present inside the context

I think what is needed here is a preprocess hook for all SDC components that creates a new Attributes variable.

That's what most theme hooks have to prevent the leakage by default.

Using a bit more sdc, I've found another leakage.
I'm also putting into this issue because the cause and solution may be the same.
It's a very weird and corner case I got using the set command.

You need two templates: the first, outer_sdc must use a set, e.g.:

    {% set my_content %}
        <div class="my-content">
            {% block my_block %}
                My test sdc
            {% endblock %}
        </div>
    {% endset %}


    <div {{ attributes }}>
        {% if 1 > 0 %}
            <div>
                {{ my_content }}
            </div>
        {% else %}
            <span>
     {{ my_content }}
  </span>
        {% endif %}
    </div>

This sdc must be embeded in another sdc/theme twig. The block section must include another sdc:

    {% embed 'my_theme:outer_sdc' %}
    {% block my_block %}
{{ include(my_theme:base_sdc') }}
        {% endblock %}
      {% endembed %}

base_sdc can be a skeleton:

<div {{ attributes }}>
  {% block example_block %}
    The contents of the example block
  {% endblock %}
</div>

The expected output should be:

<!-- 🥘 Component start: my_theme:outer_sdc -->
<div data-component-id="my_theme:outer_sdc">
    <div class="my-content">
        <!-- 🥓 Component start: my_theme:base_sdc -->
        <div data-component-id="my_theme:base">
            The contents of the example block
        </div>
        <!-- 🥓 Component end: my_theme:base -->
    </div>
</div>
<!-- 🥘 Component end: my_theme:outer_sdc -->

But actually is

<!-- 🥘 Component start: my_theme:outer_sdc -->
<div data-component-id="my_theme:base">
    <div>
        <div class="my-content">
            <!-- 🥓 Component start: my_theme:base -->
            <div data-component-id="my_theme:base">
                The contents of the example block
            </div>
            <!-- 🥓 Component end: my_theme:base -->
        </div>
    </div>
</div>
<!-- 🥘 Component end: my_theme:outer_sdc -->

Namely, the <div data-component-id="my_theme:outer_sdc"> has been printed as <div data-component-id="my_theme:base">

By the way, this problem doesn't depend on having print my_content twice conditionally.
For example if outer_sdc is

{% set my_content %}
  {% block my_block %}
    LOREM IPSUM
  {% endblock %}
{% endset %}


<div {{ attributes }}>
  <div class="my-content">
    {{ my_content }}
  </div>
</div>

The problem is the same, so the problem is something about the set command.