diff --git a/core/modules/layout_discovery/layout_discovery.module b/core/modules/layout_discovery/layout_discovery.module
index 3cffee9..30e2f12 100644
--- a/core/modules/layout_discovery/layout_discovery.module
+++ b/core/modules/layout_discovery/layout_discovery.module
@@ -5,6 +5,9 @@
  * Provides hook implementations for Layout Discovery.
  */
 
+use Drupal\Core\Render\Element;
+use Drupal\Core\Template\Attribute;
+
 /**
  * Implements hook_help().
  */
@@ -36,4 +39,12 @@ function layout_discovery_theme() {
 function template_preprocess_layout(&$variables) {
   $variables['settings'] = isset($variables['content']['#settings']) ? $variables['content']['#settings'] : [];
   $variables['layout'] = isset($variables['content']['#layout']) ? $variables['content']['#layout'] : [];
+
+  // Create an attributes variable for each region.
+  foreach (Element::children($variables['content']) as $name) {
+    if (!isset($variables['content'][$name]['#attributes'])) {
+      $variables['content'][$name]['#attributes'] = [];
+    }
+    $variables['region_attributes'][$name] = new Attribute($variables['content'][$name]['#attributes']);
+  }
 }
diff --git a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
index 64b9b4e..3a7f993 100644
--- a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
+++ b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
@@ -18,7 +18,7 @@
 %}
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    <div class="layout__region layout__region--content">
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
       {{ content.content }}
     </div>
   </div>
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
index 5eabb04..6445061 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
@@ -22,31 +22,31 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout__region layout__region--top">
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
         {{ content.top }}
       </div>
     {% endif %}
 
     {% if content.first %}
-      <div class="layout__region layout__region--first">
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
         {{ content.first }}
       </div>
     {% endif %}
 
     {% if content.second %}
-      <div class="layout__region layout__region--second">
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
         {{ content.second }}
       </div>
     {% endif %}
 
     {% if content.third %}
-      <div class="layout__region layout__region--third">
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
         {{ content.third }}
       </div>
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout__region layout__region--bottom">
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
index b416cbd..262c657 100644
--- a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
@@ -19,25 +19,25 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout__region layout__region--top">
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
         {{ content.top }}
       </div>
     {% endif %}
 
     {% if content.first %}
-      <div class="layout__region layout__region--first">
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
         {{ content.first }}
       </div>
     {% endif %}
 
     {% if content.second %}
-      <div class="layout__region layout__region--second">
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
         {{ content.second }}
       </div>
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout__region layout__region--bottom">
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
index 1099577..55e0ded 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
@@ -22,43 +22,43 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout__region layout__region--top">
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
         {{ content.top }}
       </div>
     {% endif %}
 
     {% if content.first_above %}
-      <div class="layout__region layout__region--first-above">
+      <div {{ region_attributes.first_above.addClass('layout__region', 'layout__region--first_above') }}>
         {{ content.first_above }}
       </div>
     {% endif %}
 
     {% if content.second_above %}
-      <div class="layout__region layout__region--second-above">
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
         {{ content.second_above }}
       </div>
     {% endif %}
 
     {% if content.middle %}
-      <div class="layout__region layout__region--middle">
+      <div {{ region_attributes.middle.addClass('layout__region', 'layout__region--middle') }}>
         {{ content.middle }}
       </div>
     {% endif %}
 
     {% if content.first_below %}
-      <div class="layout__region layout__region--first-below">
+      <div {{ region_attributes.first_below.addClass('layout__region', 'layout__region--first_below') }}>
         {{ content.first_below }}
       </div>
     {% endif %}
 
     {% if content.second_below %}
-      <div class="layout__region layout__region--second-below">
+      <div {{ region_attributes.second_below.addClass('layout__region', 'layout__region--second_below') }}>
         {{ content.second_below }}
       </div>
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout__region layout__region--bottom">
+      <div {{ content.bottom.addClass('layout__region', 'layout__region--bottom') }}>
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
index fa8fdd6..08051ef 100644
--- a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
+++ b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
@@ -82,7 +82,7 @@ protected function render(array &$elements) {
   public function renderLayoutData() {
     $html = [];
     $html[] = '<div data-drupal-selector="edit-layout" class="layout layout--onecol">';
-    $html[] = '<div class="layout__region layout__region--content">';
+    $html[] = '<div data-drupal-selector="edit-content" class="layout__region layout__region--content">';
     $html[] = 'This is the content';
     $html[] = '</div>';
     $html[] = '</div>';
@@ -98,11 +98,11 @@ public function renderLayoutData() {
     ];
 
     $html = [];
-    $html[] = '<div class="layout-example-1col clearfix">';
-    $html[] = '<div class="region-top">';
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout-example-1col clearfix">';
+    $html[] = '<div data-drupal-selector="edit-top" class="region-top">';
     $html[] = 'This string added by #process.';
     $html[] = '</div>';
-    $html[] = '<div class="region-bottom">';
+    $html[] = '<div data-drupal-selector="edit-bottom" class="region-bottom">';
     $html[] = 'This is the bottom';
     $html[] = '</div>';
     $html[] = '</div>';
@@ -121,11 +121,11 @@ public function renderLayoutData() {
     ];
 
     $html = [];
-    $html[] = '<div class="layout-example-1col clearfix">';
-    $html[] = '<div class="region-top">';
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout-example-1col clearfix">';
+    $html[] = '<div data-drupal-selector="edit-top" class="region-top">';
     $html[] = 'This is the top';
     $html[] = '</div>';
-    $html[] = '<div class="region-bottom">';
+    $html[] = '<div data-drupal-selector="edit-bottom" class="region-bottom">';
     $html[] = 'This is the bottom';
     $html[] = '</div>';
     $html[] = '</div>';
@@ -167,11 +167,11 @@ public function renderLayoutData() {
     ];
 
     $html = [];
-    $html[] = '<div class="layout-example-2col clearfix">';
-    $html[] = '<div class="region-left">';
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout-example-2col clearfix">';
+    $html[] = '<div data-drupal-selector="edit-left" class="class-added-by-preprocess region-left">';
     $html[] = 'This is the left';
     $html[] = '</div>';
-    $html[] = '<div class="region-right">';
+    $html[] = '<div data-drupal-selector="edit-right" class="region-right">';
     $html[] = 'This is the right';
     $html[] = '</div>';
     $html[] = '</div>';
@@ -190,12 +190,12 @@ public function renderLayoutData() {
     ];
 
     $html = [];
-    $html[] = '<div class="layout-test-plugin clearfix">';
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout-test-plugin clearfix">';
     $html[] = '<div>';
     $html[] = '<span class="setting-1-label">Blah: </span>';
     $html[] = 'Config value';
     $html[] = '</div>';
-    $html[] = '<div class="region-main">';
+    $html[] = '<div data-drupal-selector="edit-main" class="region-main">';
     $html[] = 'Main region';
     $html[] = '</div>';
     $html[] = '</div>';
diff --git a/core/modules/system/tests/modules/layout_test/layout_test.module b/core/modules/system/tests/modules/layout_test/layout_test.module
new file mode 100644
index 0000000..ba080e3
--- /dev/null
+++ b/core/modules/system/tests/modules/layout_test/layout_test.module
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * @file
+ * Provides hook implementations for Layout Test.
+ */
+
+/**
+ * Implements hook_preprocess_HOOK() for layout templates.
+ */
+function layout_test_preprocess_layout(&$variables, $hook) {
+  // @todo Rename to layout_test_preprocess_layout__layout_test_2col and remove
+  //   $hook check once https://www.drupal.org/node/2886187 is resolved.
+  if ($hook == 'layout_test_2col') {
+    $variables['region_attributes']['left']->addClass('class-added-by-preprocess');
+  }
+}
diff --git a/core/modules/system/tests/modules/layout_test/templates/layout-test-1col.html.twig b/core/modules/system/tests/modules/layout_test/templates/layout-test-1col.html.twig
index e7a7eb5..69ecef2 100644
--- a/core/modules/system/tests/modules/layout_test/templates/layout-test-1col.html.twig
+++ b/core/modules/system/tests/modules/layout_test/templates/layout-test-1col.html.twig
@@ -4,11 +4,19 @@
  * Template for an example 1 column layout.
  */
 #}
-<div class="layout-example-1col clearfix">
-  <div class="region-top">
+{%
+  set classes = [
+    'layout-example-1col',
+    'clearfix',
+  ]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
+  <div {{ region_attributes.top.addClass('region-top') }}>
     {{ content.top }}
   </div>
-  <div class="region-bottom">
+  <div {{ region_attributes.bottom.addClass('region-bottom') }}>
     {{ content.bottom }}
   </div>
 </div>
+{% endif %}
diff --git a/core/modules/system/tests/modules/layout_test/templates/layout-test-2col.html.twig b/core/modules/system/tests/modules/layout_test/templates/layout-test-2col.html.twig
index 11433ee..2c017eb 100644
--- a/core/modules/system/tests/modules/layout_test/templates/layout-test-2col.html.twig
+++ b/core/modules/system/tests/modules/layout_test/templates/layout-test-2col.html.twig
@@ -4,11 +4,19 @@
  * Template for an example 2 column layout.
  */
 #}
-<div class="layout-example-2col clearfix">
-  <div class="region-left">
+{%
+  set classes = [
+    'layout-example-2col',
+    'clearfix',
+  ]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
+  <div {{ region_attributes.left.addClass('region-left') }}>
     {{ content.left }}
   </div>
-  <div class="region-right">
+  <div {{ region_attributes.right.addClass('region-right') }}>
     {{ content.right }}
   </div>
 </div>
+{% endif %}
diff --git a/core/modules/system/tests/modules/layout_test/templates/layout-test-plugin.html.twig b/core/modules/system/tests/modules/layout_test/templates/layout-test-plugin.html.twig
index e49942c..75511e0 100644
--- a/core/modules/system/tests/modules/layout_test/templates/layout-test-plugin.html.twig
+++ b/core/modules/system/tests/modules/layout_test/templates/layout-test-plugin.html.twig
@@ -4,12 +4,20 @@
  * Template for layout_test_plugin layout.
  */
 #}
-<div class="layout-test-plugin clearfix">
+{%
+  set classes = [
+    'layout-test-plugin',
+    'clearfix',
+  ]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
   <div>
     <span class="setting-1-label">Blah: </span>
     {{ settings.setting_1 }}
   </div>
-  <div class="region-main">
+  <div {{ region_attributes.main.addClass('region-main') }}>
     {{ content.main }}
   </div>
 </div>
+{% endif %}