diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index b3deb32..a7b5eef 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -999,6 +999,7 @@ function template_preprocess_tablesort_indicator(&$variables) {
  * @see https://www.drupal.org/node/1842756
  */
 function template_preprocess_item_list(&$variables) {
+  $variables['wrapper_attributes'] = new Attribute($variables['wrapper_attributes']);
   foreach ($variables['items'] as &$item) {
     $attributes = array();
     // If the item value is an array, then it is a render array.
@@ -1718,7 +1719,7 @@ function drupal_common_theme() {
       'variables' => array('status' => MARK_NEW),
     ),
     'item_list' => array(
-      'variables' => array('items' => array(), 'title' => '', 'list_type' => 'ul', 'attributes' => array(), 'empty' => NULL, 'context' => array()),
+      'variables' => array('items' => array(), 'title' => '', 'list_type' => 'ul', 'wrapper_attributes' => array(), 'attributes' => array(), 'empty' => NULL, 'context' => array()),
     ),
     'feed_icon' => array(
       'variables' => array('url' => NULL, 'title' => NULL),
diff --git a/core/modules/system/css/components/item-list.theme.css b/core/modules/system/css/components/item-list.theme.css
index 9a1088e..185e450 100644
--- a/core/modules/system/css/components/item-list.theme.css
+++ b/core/modules/system/css/components/item-list.theme.css
@@ -2,21 +2,6 @@
  * @file
  * Visual styles for item list.
  */
-
-.item-list .title {
-  font-weight: bold;
-}
-.item-list ul {
-  margin: 0 0 0.75em 0;
-  padding: 0;
-}
-.item-list ul li {
-  margin: 0 0 0.25em 1.5em; /* LTR */
-  padding: 0;
-}
-[dir="rtl"] .item-list ul li {
-  margin: 0 1.5em 0.25em 0;
-}
 ul.item-list__comma-list {
   display: inline;
 }
diff --git a/core/modules/system/templates/item-list.html.twig b/core/modules/system/templates/item-list.html.twig
index 172799d..1462cf4 100644
--- a/core/modules/system/templates/item-list.html.twig
+++ b/core/modules/system/templates/item-list.html.twig
@@ -9,6 +9,7 @@
  *   - value: The content of the list element.
  * - title: The title of the list.
  * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
  * - attributes: HTML attributes to be applied to the list.
  * - empty: A message to display when there are no items. Allowed value is a
  *   string or render array.
@@ -21,9 +22,9 @@
  */
 #}
 {% if context.list_style %}
-  {% set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+  {%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
 {% endif %}
-{%- if items or empty -%}
+{% if items or empty %}
   {%- if title is not empty -%}
     <h3>{{ title }}</h3>
   {%- endif -%}
diff --git a/core/themes/bartik/css/components/item-list.css b/core/themes/bartik/css/components/item-list.css
index 698bd56..eeb4e77 100644
--- a/core/themes/bartik/css/components/item-list.css
+++ b/core/themes/bartik/css/components/item-list.css
@@ -10,10 +10,3 @@
 [dir="rtl"] .item-list ul li {
   padding: 0.2em 0 0 0.5em;
 }
-.item-list .item-list__comma-list,
-.item-list .item-list__comma-list li,
-[dir="rtl"] .item-list .item-list__comma-list,
-[dir="rtl"] .item-list .item-list__comma-list li {
-  margin: 0;
-  padding: 0;
-}
diff --git a/core/themes/classy/classy.libraries.yml b/core/themes/classy/classy.libraries.yml
index a5bde77..2a0831a 100644
--- a/core/themes/classy/classy.libraries.yml
+++ b/core/themes/classy/classy.libraries.yml
@@ -3,6 +3,9 @@ base:
   css:
     theme:
       css/layout.css: {}
+      # We can not attach this in the item-list.html.twig template since it is
+      # often used during RendererInterface::renderPlain().
+      css/dataset/item-list.css: {}
 
 book-navigation:
   version: VERSION
diff --git a/core/themes/classy/css/dataset/item-list.css b/core/themes/classy/css/dataset/item-list.css
new file mode 100644
index 0000000..da51a40
--- /dev/null
+++ b/core/themes/classy/css/dataset/item-list.css
@@ -0,0 +1,38 @@
+/**
+ * @file
+ * Styling for item lists.
+ */
+.item-list .title {
+  font-weight: bold;
+}
+.item-list ul {
+  margin: 0 0 0.75em 0;
+  padding: 0;
+}
+.item-list ul li {
+  margin: 0 0 0.25em 1.5em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] .item-list ul li {
+  margin: 0 1.5em 0.25em 0;
+}
+.item-list--comma-list {
+  display: inline;
+}
+/**
+ * Comma separated lists inside lists.
+ */
+.item-list ul.item-list__comma-list {
+  display: inline;
+}
+.item-list ul.item-list__comma-list li {
+  display: inline;
+  list-style-type: none;
+}
+.item-list .item-list__comma-list,
+.item-list .item-list__comma-list li,
+[dir="rtl"] .item-list .item-list__comma-list,
+[dir="rtl"] .item-list .item-list__comma-list li {
+  margin: 0;
+  padding: 0;
+}
diff --git a/core/themes/classy/templates/dataset/item-list.html.twig b/core/themes/classy/templates/dataset/item-list.html.twig
index 7ba8be4..20541b0 100644
--- a/core/themes/classy/templates/dataset/item-list.html.twig
+++ b/core/themes/classy/templates/dataset/item-list.html.twig
@@ -9,6 +9,7 @@
  *   - value: The content of the list element.
  * - title: The title of the list.
  * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
  * - attributes: HTML attributes to be applied to the list.
  * - empty: A message to display when there are no items. Allowed value is a
  *   string or render array.
@@ -19,10 +20,11 @@
  */
 #}
 {% if context.list_style %}
-  {% set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+  {%- set wrapper_attributes = wrapper_attributes.addClass('item-list--' ~ context.list_style) %}
+  {%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
 {% endif %}
-{%- if items or empty -%}
-  <div class="item-list">
+{% if items or empty -%}
+  <div{{ wrapper_attributes.addClass('item-list') }}>
     {%- if title is not empty -%}
       <h3>{{ title }}</h3>
     {%- endif -%}