src/Render/Placeholder/BigPipeStrategy.php               |  7 ++++---
 .../src/Unit/Render/Placeholder/BigPipeStrategyTest.php  | 16 ++++++++--------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/Render/Placeholder/BigPipeStrategy.php b/src/Render/Placeholder/BigPipeStrategy.php
index 1ff5986..6ae4973 100644
--- a/src/Render/Placeholder/BigPipeStrategy.php
+++ b/src/Render/Placeholder/BigPipeStrategy.php
@@ -202,9 +202,10 @@ class BigPipeStrategy implements PlaceholderStrategyInterface {
    * @todo Related, perhaps distinguish between "HTML" and "non-HTML (attr value)" use cases? Because right now, this *breaks* HTML and therefore breaks response filters: this indiscriminately uses a <div> as a placeholder, which is invalid inside a HTML attribute, and thus breaks DOM parsing.
    */
   protected static function createBigPipeNoJsPlaceholder($original_placeholder, array $placeholder_render_array) {
-    $html_placeholder = Html::getId($original_placeholder);
+    $big_pipe_placeholder_id = static::generateBigPipePlaceholderId($original_placeholder, $placeholder_render_array);
+
     return [
-      '#markup' => '<div data-big-pipe-selector-nojs="' . $html_placeholder . '"></div>',
+      '#markup' => '<div data-big-pipe-nojs-placeholder-id="' . $big_pipe_placeholder_id . '"></div>',
       '#cache' => [
         'max-age' => 0,
         'contexts' => [
@@ -213,7 +214,7 @@ class BigPipeStrategy implements PlaceholderStrategyInterface {
       ],
       '#attached' => [
         'big_pipe_nojs_placeholders' => [
-          $html_placeholder => $placeholder_render_array,
+          $big_pipe_placeholder_id => $placeholder_render_array,
         ],
       ],
     ];
diff --git a/tests/src/Unit/Render/Placeholder/BigPipeStrategyTest.php b/tests/src/Unit/Render/Placeholder/BigPipeStrategyTest.php
index 484f76b..65e7255 100644
--- a/tests/src/Unit/Render/Placeholder/BigPipeStrategyTest.php
+++ b/tests/src/Unit/Render/Placeholder/BigPipeStrategyTest.php
@@ -84,11 +84,11 @@ class BigPipeStrategyTest extends UnitTestCase {
       ],
     ];
     $messages_big_pipe_nojs_placeholder = [
-      '#markup' => '<div data-big-pipe-selector-nojs="drupal-render-placeholder-callbackdrupalcorerenderelementstatusmessagesrendermessages-arguments0-tokena8c34b5edrupal-render-placeholder"></div>',
+      '#markup' => '<div data-big-pipe-nojs-placeholder-id="callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages&args[0]&token=a8c34b5e"></div>',
       '#cache' => $cacheability_depends_on_session_and_nojs_cookie,
       '#attached' => [
         'big_pipe_nojs_placeholders' => [
-          'drupal-render-placeholder-callbackdrupalcorerenderelementstatusmessagesrendermessages-arguments0-tokena8c34b5edrupal-render-placeholder' => $placeholders[$messages_placeholder_markup],
+          'callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages&args[0]&token=a8c34b5e' => $placeholders[$messages_placeholder_markup],
         ],
       ],
     ];
@@ -98,11 +98,11 @@ class BigPipeStrategyTest extends UnitTestCase {
       '#lazy_builder' => ['form_builder:renderPlaceholderFormAction', []],
     ];
     $form_action_big_pipe_nojs_placeholder = [
-      '#markup' => '<div data-big-pipe-selector-nojs="form-action-cc611e1d"></div>',
+      '#markup' => '<div data-big-pipe-nojs-placeholder-id="callback=form_builder%3ArenderPlaceholderFormAction&&token=e8cb6dae"></div>',
       '#cache' => $cacheability_depends_on_session_only,
       '#attached' => [
         'big_pipe_nojs_placeholders' => [
-          'form-action-cc611e1d' => $placeholders['form_action_cc611e1d'],
+          'callback=form_builder%3ArenderPlaceholderFormAction&&token=e8cb6dae' => $placeholders['form_action_cc611e1d'],
         ],
       ],
     ];
@@ -115,11 +115,11 @@ class BigPipeStrategyTest extends UnitTestCase {
       ],
     ];
     $csrf_token_big_pipe_nojs_placeholder = [
-      '#markup' => '<div data-big-pipe-selector-nojs="22dcc695f4a22e809a62d8eb7addd6fccecfbf31"></div>',
+      '#markup' => '<div data-big-pipe-nojs-placeholder-id="callback=route_processor_csrf%3ArenderPlaceholderCsrfToken&args[0]=admin/config/user-interface/shortcut/manage/default/add-link-inline&token=77d1dce6"></div>',
       '#cache' => $cacheability_depends_on_session_only,
       '#attached' => [
         'big_pipe_nojs_placeholders' => [
-          '22dcc695f4a22e809a62d8eb7addd6fccecfbf31' => $placeholders['22dcc695f4a22e809a62d8eb7addd6fccecfbf31'],
+          'callback=route_processor_csrf%3ArenderPlaceholderCsrfToken&args[0]=admin/config/user-interface/shortcut/manage/default/add-link-inline&token=77d1dce6' => $placeholders['22dcc695f4a22e809a62d8eb7addd6fccecfbf31'],
         ],
       ],
     ];
@@ -133,11 +133,11 @@ class BigPipeStrategyTest extends UnitTestCase {
       ],
     ];
     $hello_big_pipe_nojs_placeholder = [
-      '#markup' => '<div data-big-pipe-selector-nojs="hello"></div>',
+      '#markup' => '<div data-big-pipe-nojs-placeholder-id="callback=hello_or_yarhar&&token=d4524bc8"></div>',
       '#cache' => $cacheability_depends_on_session_only,
       '#attached' => [
         'big_pipe_nojs_placeholders' => [
-          'hello' => $placeholders['<hello'],
+          'callback=hello_or_yarhar&&token=d4524bc8' => $placeholders['<hello'],
         ],
       ],
     ];