Field twig template : override HTML output

Question

Still converting my D6 theme to D8 and I need to override the HTML output for a custom field in a node twig template. After some readings, I don't find an example for this. My field contain files and I want them to display in a HTML list instead of a div + span. So I created a file named field--field-fichier-joint.html.twig and added inside the code from this post , but I get a WSOD. This is my actually code:

{% extends "@stable/field/field.html.twig" %}

{# Create classes array #}
{% set classes = [] %}

{# BEM inspired class syntax: https://en.bem.info/
   Enable this code if you would like field classes like "article__tags", where article is the content type and field_tags is the field name.
{% set classes = classes|merge([
  bundle ~ '__' ~ field_name|replace({'field_' : ''})|clean_class
]) %}
#}

{% set attributes = attributes.addClass(classes) %}

{#
  Ensures that the visually hidden option for field labels works correctly.
  @todo: Remove when https://www.drupal.org/node/2779919 is resolved.
#}
{% set title_attributes = title_attributes.addClass(label_display == 'visually_hidden' ? 'visually-hidden') %}
<ul>
  {% for item in items %}
      <li>{{ item.content }}</li>
  {% endfor %}
</ul>

If someone can help me. Thanks

EDIT: 4k4 solution work fine but I need to add some classes and I saw a very smart solution but I need help to use it. This is here

EDIT2: adding classes work but how can specify which one to apply to an element ? Then when I want to add some flexibility to the code with this:

{# Définition des variables et classes #}
{%
  set classes = classes ?: [
    'field',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class
  ]
%}
{% set wrapper_element = wrapper_element ?: 'ul' %}

{% set element = element ?: 'li' %}

{# Mise en forme sortie HTML #}
<{{ wrapper_element }}{{ attributes.addClass(classes) }}>
  {% for item in items %}
      <{{ element }}>{{ item.content }}</{{ element }}>
  {% endfor %}
</{{ wrapper_element }}>

I get Multiple items like this, why ?:

< Un fichier joint pour test Autre fichier test > Un fichier joint pour test Un fichier joint pour test Autre fichier test > < Un fichier joint pour test Autre fichier test > Autre fichier test Un fichier joint pour test Autre fichier test >

2- Adding classes I want to add classes to my HTML output, in particular, the odd/even and I found this code but only odd class is applied:

{%
  set li_classes =  classes ?: [
    'field__li',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class,
    'ligne__' ~ cycle(['odd', 'even'], loop.index0),
  ]
%}

then, my li classes inherit from ul classes, how can I avoid this ? This code work better but the cycle loop result is out of the class..

 <li {{ attributes.addClass(li_classes) }}{{ cycle(['odd', 'even'], loop.index0)}}>{{ item.content }}</li>

render:

<li class="field__ul field--fichier-joint field__li ligne__odd" odd="">
</li>
<li class="field__ul field--fichier-joint field__li ligne__odd" even="">
</li>

EDIT: the Final code

{# Les classes a jouter à la liste UL #}
{%
  set ul_classes = classes ?: [
    'field__ul',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class
  ]
%}

{# Mise en forme HTML #}
<ul {{ attributes.addClass(ul_classes) }}>
  {% for item in items %}
      {# Les classes a jouter aux lignes LI #}
{%
  set li_classes =  classes ?: [
    'field__li',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class,
    'ligne__' ~ cycle(['odd', 'even'], loop.index0),
    ]
%}
      <li {{ item.attributes.addClass(li_classes) }}>{{ item.content }}</li>
  {% endfor %}
</ul>

Answer 1

You only need the twig content between <ul> ... </ul>. The variables you set are not used anywhere. And you don't need to extend the field template from the base theme to override it. Only if you want to replace twig blocks.

field--field-fichier-joint.html.twig

{%
  set classes = [
    'class1',
    'class2',
  ]
%}

<ul{{ attributes.addClass(classes) }}>
  {% for item in items %}
      {% set zebra = cycle(['odd', 'even'], loop.index0) %}
      <li{{ item.attributes.addClass(zebra) }}">{{ item.content }}</li>
  {% endfor %}
</ul>

If you still get an WSOD enable error reporting to see in which file and line number the error occurs.