diff -u b/core/includes/theme.inc b/core/includes/theme.inc
--- b/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -21,6 +21,7 @@
 use Drupal\Core\Theme\ThemeSettings;
 use Drupal\Component\Utility\NestedArray;
 use Drupal\Core\Render\Element;
+use Zend\Stdlib\ArrayUtils;
 
 /**
  * @defgroup content_flags Content markers
@@ -2476,6 +2477,29 @@
   foreach ($variables['items'] as $delta => $item) {
     $variables['item_attributes'][$delta] = !empty($element['#items'][$delta]->_attributes) ? new Attribute($element['#items'][$delta]->_attributes) : clone($default_attributes);
   }
+
+  //@todo this is dummy data for testing merging of the attributes remove when merge works.
+  $variables['attributes']['class'] = 'test-attribute-merge-1';
+  $variables['content_attributes']['class'] ='test-attribute-merge-1';
+  $variables['content_attributes']['role'] = 'content_attributes-role';
+  $variables['attributes']['role'] = 'attributes-role';
+  $variables['title_attributes']['role'] = 'title-attributes-role';
+  $variables['item_attributes']['0']['role'] = 'item-attributes-role';
+
+  //@todo: merge attributes for fields
+  if ($element['#label_display'] == 'hidden' && $variables['multiple']) {
+    //@todo: merge $variables['attributes'] and  $variables['content_attributes']
+    // $variables['attributes'] = NestedArray::mergeDeep($variables['attributes']->storage(), $variables['content_attributes']->storage());
+  }
+  if ($element['#label_display'] != 'hidden' && !$variables['multiple']) {
+    //@todo: merge  $variables['item_attributes'][0] and $variables['content_attributes']
+    //$variables['content_attributes'] = NestedArray::mergeDeep($variables['content_attributes']->storage(), $variables['item_attributes']['0']->storage());
+  }
+  if ($element['#label_display'] == 'hidden' && !$variables['multiple']) {
+    //@todo: merge $variables['attributes'], $variables['item_attributes'][0] &  $variables['content_attributes']
+    // $variables['attributes'] = NestedArray::mergeDeep($variables['attributes']->storage(), $variables['content_attributes']->storage(), $variables['item_attributes']['0']->storage());
+  }
+
 }
 
 /**
diff -u b/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
--- b/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -612,7 +612,16 @@
 .messages--error p.error {
   color: #a51b00;
 }
+/* @todo: remove these test classes for attributes merging */
+div[role*="attributes-role"]{ background:gray;}
+div[role*="title-attributes-role"]{font-style: italic;  color:white;}
+div[role*="content_attributes-role"]{ color:pink;}
+div[role*="item-attributes-role"]{border:1px solid red;}
+.test-attribute-merge-1{text-transform: uppercase;}
+.test-attribute-merge-2{ font-size:30px;}
+/* attribute merging test end */
 
+.field{ margin:10px 0;}
 /* Field display */
 .field__label {
   font-weight: bold;
diff -u b/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
--- b/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -23,9 +23,9 @@
  * - content_attributes: HTML attributes for the content.
  * - items: List of all the field items.
  * - item_attributes: List of HTML attributes for each item.
- * - field_type:
- * - field_name:
- * - field_label:
+ * - field_type: @todo: needs description
+ * - field_name: @todo: needs description
+ * - field_label: @todo: needs description
  *
  * @see template_preprocess_field()
  *
@@ -38,7 +38,7 @@
 dynamically.
 #}
 {% set classes %}
-field field--name-{{ field_name }} field--type-{{ field_type }} field--label-{{ field_label }}{{ attributes.class }}
+field field--name-{{ field_name }} field--type-{{ field_type }} field--label-{{ field_label }} {{ attributes.class }}
 {% endset %}
 
 {% if multiple and not label_hidden %}
@@ -70,8 +70,9 @@
       <div class="field_item">Data</div>
     </div>
   </div>
+  attributes are merged  with  content_attributes
 #}
-  <div class="{{ classes }}field__items"{{ attributes|without('class') }}{{ content_attributes }}>
+  <div class="{{ classes }} field__items"{{ attributes }}>
     {% for delta, item in items %}
       <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
     {% endfor %}
@@ -84,10 +85,13 @@
     <div class="field_label">Data</div>
     <div class="field_item">Data</div>
   </div>
+  content_attributes are merged with item_attributes
 #}
   <div class="{{ classes }}"{{ attributes|without('class') }}>
     <div class="field__label"{{ title_attributes }}>{{ label }}:</div>
-      <div class="field__item"{{ content_attributes }}{{ item_attributes[0] }}>{{ item }}</div>
+    {% for delta, item in items %}
+      <div class="field__item"{{ content_attributes }}>{{ item }}</div>
+    {% endfor %}
   </div>
 
 {% elseif not multiple and label_hidden %}
@@ -96,9 +100,10 @@
   <div class="{{ classes }}field__item">
     data
   </div>
+  attributes are merged with content_attributes and item_attributes
 #}
   {% for delta, item in items %}
-    <div class="{{ classes }} field__item"{{ attributes|without('class') }}{{ content_attributes }}{{ item_attributes[0] }}>{{ item }}</div>
+    <div class="{{ classes }} field__item"{{ attributes|without('class') }}>{{ item }}</div>
   {% endfor %}
 
 {% endif %}
diff -u b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
--- b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
+++ b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
@@ -349,12 +349,12 @@
     $this->assertText($edit['description[0][value]'], 'The randomly generated term description is present.');
 
     // Did this page request display a 'term-listing-heading'?
-    $this->assertTrue($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page displayed the term description element.');
+    $this->assertTrue($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field--name-description")]'), 'Term page displayed the term description element.');
     // Check that it does NOT show a description when description is blank.
     $term->setDescription(NULL);
     $term->save();
     $this->drupalGet('taxonomy/term/' . $term->id());
-    $this->assertFalse($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page did not display the term description when description was blank.');
+    $this->assertFalse($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field--name-description")]'), 'Term page did not display the term description when description was blank.');
 
     // Check that the description value is processed.
     $value = $this->randomName();