Iterating a slot and wrapping components in markup causes front-end error

Overview

Iterating a slot's components and wrapping them in markup will cause XB to have a front-end rendering error (but the preview works fine).

Why would someone want to do this?

If a design system's style follows follows BEM convention, it's sometimes preferable to wrap child elements containing unknown other components in something that's addressable by the current component. Think of grids, lists, etc.

Copy/paste example of that doesn't work

example.component.yml

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: Example
status: stable
group: Molecule/Example
description: A simple example that shows wrapping slot components in markup will break things
props:
  dummy:
    title: Dummy
    required: false
slots:
  items:
    title: Items

example.twig

<div class="example">
  {% for item in items %}
    <div class="example__item">
      {{ item }}
    </div>
  {% endfor %}
</div>

A not very helpful stack trace

index.js?v=1:150 TypeError: Cannot read properties of undefined (reading 'element')
    at index.js?v=1:235:31377
    at H5 (index.js?v=1:40:24296)
    at Ug (index.js?v=1:40:42451)
    at index.js?v=1:40:40763
    at k (index.js?v=1:25:1600)
    at MessagePort.j (index.js?v=1:25:1971)

A very dirty workaround

By using #prefix and #suffix, one can seemingly work around this. See the altered twig:

<div class="example">
  {% for item in items %}
    {% if item is iterable %}
      {% set item = item|merge({
        '#prefix': item['#prefix'] ~ '<div class="example__item">',
        '#suffix': '</div>' ~ item['#suffix'],
      }) %}
    {% endif %}
    {{ item }}
  {% endfor %}
</div>

Is this something that should be supported?

Proposed resolution

TBD

User interface changes

TBD