diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 5da51e8..70425b8 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -233,6 +233,14 @@ drupal.machine-name:
     - core/drupalSettings
     - core/drupal.form
 
+drupal.message:
+  version: VERSION
+  js:
+    misc/message.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupal.announce
+
 drupal.progress:
   version: VERSION
   js:
diff --git a/core/modules/big_pipe/src/Tests/BigPipePlaceholderTestCases.php b/core/modules/big_pipe/src/Tests/BigPipePlaceholderTestCases.php
index 7b5c33f..28a804c 100644
--- a/core/modules/big_pipe/src/Tests/BigPipePlaceholderTestCases.php
+++ b/core/modules/big_pipe/src/Tests/BigPipePlaceholderTestCases.php
@@ -1,4 +1,4 @@
-<?php
+f<?php
 
 /**
  * @file
@@ -90,11 +90,11 @@ public static function cases(ContainerInterface $container = NULL, AccountInterf
           'command' => 'insert',
           'method' => 'replaceWith',
           'selector' => '[data-big-pipe-placeholder-id="callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages&args%5B0%5D&token=_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA"]',
-          'data' => '    <div role="contentinfo" aria-label="Status message" class="messages messages--status">' . "\n" . '                  <h2 class="visually-hidden">Status message</h2>' . "\n" . '                    Hello from BigPipe!' . "\n" . '            </div>' . "\n    ",
+          'data' => "\n" . '<div data-drupal-messages>' . "\n" . '    <div role="contentinfo" aria-label="Status message" class="messages messages--status">' . "\n" . '                  <h2 class="visually-hidden">Status message</h2>' . "\n" . '                    Hello from BigPipe!' . "\n" . '            </div>' . "\n" . '    </div>' . "\n",
           'settings' => NULL,
         ],
       ];
-      $status_messages->embeddedHtmlResponse = '<div role="contentinfo" aria-label="Status message" class="messages messages--status">' . "\n" . '                  <h2 class="visually-hidden">Status message</h2>' . "\n" . '                    Hello from BigPipe!' . "\n" . '            </div>' . "\n    \n";
+      $status_messages->embeddedHtmlResponse = '<div data-drupal-messages>' . "\n" . '    <div role="contentinfo" aria-label="Status message" class="messages messages--status">' . "\n" . '                  <h2 class="visually-hidden">Status message</h2>' . "\n" . '                    Hello from BigPipe!' . "\n" . '            </div>' . "\n" . '    </div>' . "\n\n";
     }
 
 
diff --git a/core/modules/system/templates/status-messages.html.twig b/core/modules/system/templates/status-messages.html.twig
index 73bd9b7..0de0e6c 100644
--- a/core/modules/system/templates/status-messages.html.twig
+++ b/core/modules/system/templates/status-messages.html.twig
@@ -23,6 +23,7 @@
  * @ingroup themeable
  */
 #}
+<div data-drupal-messages>
 {% for type, messages in message_list %}
   <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
     {% if type == 'error' %}
@@ -45,3 +46,4 @@
     {% endif %}
   </div>
 {% endfor %}
+</div>
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
index 15a550d..bc90011 100644
--- a/core/themes/bartik/css/components/messages.css
+++ b/core/themes/bartik/css/components/messages.css
@@ -4,10 +4,15 @@
  */
 
 .messages__wrapper {
-  padding: 20px 0 5px 8px;
+  padding: 0 0 0 8px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 8px 0;
+}
+.messages__wrapper .messages:first-child {
+  margin-top: 28px;
+}
+.messages__wrapper .messages:last-child {
+  margin-bottom: 13px;
 }
 [dir="rtl"] .messages__wrapper {
-  padding: 20px 8px 5px 0;
+  padding: 0 8px 0 0;
 }
diff --git a/core/themes/bartik/templates/status-messages.html.twig b/core/themes/bartik/templates/status-messages.html.twig
index a4e1e9e..aa1bedd 100644
--- a/core/themes/bartik/templates/status-messages.html.twig
+++ b/core/themes/bartik/templates/status-messages.html.twig
@@ -23,7 +23,7 @@
 {% block messages %}
   {% if message_list is not empty %}
     {{ attach_library('bartik/messages') }}
-    <div class="messages__wrapper layout-container">
+    <div class="messages__wrapper layout-container" data-drupal-messages>
       {{ parent() }}
     </div>
   {% endif %}
diff --git a/core/themes/classy/templates/misc/status-messages.html.twig b/core/themes/classy/templates/misc/status-messages.html.twig
index 282df38..0d059f3 100644
--- a/core/themes/classy/templates/misc/status-messages.html.twig
+++ b/core/themes/classy/templates/misc/status-messages.html.twig
@@ -21,6 +21,7 @@
  *   - class: HTML classes.
  */
 #}
+<div data-drupal-messages>
 {% block messages %}
 {% for type, messages in message_list %}
   {%
@@ -53,3 +54,4 @@
   {% set attributes = attributes.removeClass(classes) %}
 {% endfor %}
 {% endblock messages %}
+</div>