This is related to #3301373: Create twig |as filter
In conjunction with the |as
filter, themers typically want to set CSS classes on the field components to maintain proper BEM architecture.
The issue above has this discussion to add this functionality into that filter, but in a subsequent Slack conversation @lauriii suggested splitting it into its own |add_class
filter, along with a |setAttribute
filter.
This would enable something like
{{ content.field_event__links|as('list')|add_class('event__link-list') }}
{# Produces: #}
<ul class="list event__link-list">
<li><a href="/">foo</a></li>
<li><a href="/">bar</a></li>
</ul>
and
{{ content.field_event__links|as('list')|add_class('event__link-list')|set_attribute('data-kitten', 'mila') }}
{# Produces: #}
<div class="field__items field--tags__items event__link-list"> data-kitten="mila">
<!-- rest of the markup -->
</div>