SW6: Overwrite outer block but not inner

Shopware 6 is running on Symfony. Symfony is running on twig. Therefore the Shopware 6 default template is implemented in twig, which is pretty cool and provides a lot of syntactic sugar.

Resources/views/storefront/component/checkout/offcanvas-item.html.twig

I want to overwrite <div class="col-auto"> and add a second css class.

Two weeks ago I would have copied the complete block, changed the class and left it as is. But this would not be future-proof. If an official Shopware update changes something inside the block, we would overwrite that change as well. This might be intended if you want to nail down your your theme and make sure no changes are accidentally introduced. But it also keeps all future features and improvements away as well, so I advise against this.

So, how to do it then?
Pretty simple: Just change the class but output the parent block!

There are two ways to achieve that.

Variant 1: If you might want to add other code

{% block component_offcanvas_product_image %}
    <div class="col-auto col-image">
        {% block component_offcanvas_product_image_inner %}
            <!-- other code here -->
            {{ parent() }}
            <!-- or maybe here - up to you -->
        {% endblock %}
    </div>
{% endblock %}

Variant 2: If you only want the block

{% block component_offcanvas_product_image %}
    <div class="col-auto col-image">
        {{ block('component_offcanvas_product_image_inner') }}
    </div>
{% endblock %}