diff -u b/core/misc/message.es6.js b/core/misc/message.es6.js
--- b/core/misc/message.es6.js
+++ b/core/misc/message.es6.js
@@ -209,25 +209,27 @@
    * @return {HTMLElement}
    *   A DOM Node.
    */
-  Drupal.theme.message = (message, options) => {
+  Drupal.theme.message = ({ text }, options) => {
     const messagesTypes = Drupal.message.getMessageTypes();
     const messageWraper = document.createElement('div');
-    let messageText = message.text;
+    // let messageText = message.text;
+    const messageText = document.createElement('h2');
+    messageText.setAttribute('class', 'visually-hidden');
+
     messageWraper.setAttribute('class', `messages messages--${options.type}`);
     messageWraper.setAttribute('role', 'contentinfo');
     messageWraper.setAttribute('data-drupal-message-id', options.id);
     messageWraper.setAttribute('data-drupal-message-type', options.type);
     if (options.type in messagesTypes) {
       messageWraper.setAttribute('aria-label', messagesTypes[options.type]);
-      messageText = `<h2 class="visually-hidden">${messagesTypes[options.type]}</h2>\n${message.text}`;
+      messageText.innerHTML = messagesTypes[options.type];
     }
 
     // Alerts have a different HTML structure
     if (options.type === 'error') {
-      const ariaAlert = document.createElement('div');
-      ariaAlert.setAttribute('role', 'alert');
-      ariaAlert.innerHTML = messageText;
-      messageWraper.appendChild(ariaAlert);
+      messageText.setAttribute('role', 'alert');
+      messageWraper.innerHTML = text;
+      messageWraper.insertAdjacentElement('afterbegin', messageText);
     }
     else {
       messageWraper.innerHTML = messageText;
diff -u b/core/misc/message.js b/core/misc/message.js
--- b/core/misc/message.js
+++ b/core/misc/message.js
@@ -110,24 +110,28 @@
     return _class;
   }();
 
-  Drupal.theme.message = function (message, options) {
+  Drupal.theme.message = function (_ref, options) {
+    var text = _ref.text;
+
     var messagesTypes = Drupal.message.getMessageTypes();
     var messageWraper = document.createElement('div');
-    var messageText = message.text;
+
+    var messageText = document.createElement('h2');
+    messageText.setAttribute('class', 'visually-hidden');
+
     messageWraper.setAttribute('class', 'messages messages--' + options.type);
     messageWraper.setAttribute('role', 'contentinfo');
     messageWraper.setAttribute('data-drupal-message-id', options.id);
     messageWraper.setAttribute('data-drupal-message-type', options.type);
     if (options.type in messagesTypes) {
       messageWraper.setAttribute('aria-label', messagesTypes[options.type]);
-      messageText = '<h2 class="visually-hidden">' + messagesTypes[options.type] + '</h2>\n' + message.text;
+      messageText.innerHTML = messagesTypes[options.type];
     }
 
     if (options.type === 'error') {
-      var ariaAlert = document.createElement('div');
-      ariaAlert.setAttribute('role', 'alert');
-      ariaAlert.innerHTML = messageText;
-      messageWraper.appendChild(ariaAlert);
+      messageText.setAttribute('role', 'alert');
+      messageWraper.innerHTML = text;
+      messageWraper.insertAdjacentElement('afterbegin', messageText);
     } else {
       messageWraper.innerHTML = messageText;
     }