What is placeholder_token in html.html.twig for?

Question

Started to dive into Drupal 8 twig, and what better place to start than from the top: html.html.twig

But found this:

<head-placeholder token="{{ placeholder_token|raw }}">

Here is the change record:

• #2565021: HTML template head, scripts, styles and scripts_bottom replaced with placeholder_token

And some related issues:

• #2538950: Replace SafeMarkup::format() in template_preprocess_html with placeholders in the template
• #2603074: Remove |raw from use in core templates

And the documentation:

• html.html.twig on api.drupal.org

But nothing really clarifies why this was done.

Is this a Drupalism? A Twigism? What are these tokens for?

The only other time I've seen a placeholder token system like this was with CTools where they create a placeholder in the generated HTML output and then go back later and replace the token with the actual value. If this is the same concept, why does Drupal core need to do this? (The CTools system was ostensibly to get around some core limitations).

Answer 1

The reason why placeholder_token is used in html.html.twig instead of using just a normal variable is that in Drupal 8 we have different render strategies than just the simple rendering where everything gets rendered in the template and we are able to collect the assets.

In the Drupal cores default Renderer we have placeholders (placeholders might attach some additional assets). If we would print the assets in a normal variable it would happen before all the assets have been collected. So what Drupal 8 does is it first renders everything with the normal rendering in the template, then it replaces the placeholders and collects assets from then, and after all that has been done we finally replace the asset placeholders to add the assets to the page.

Answer 2

TL;DR: In a practical scenario <head-placeholder token="{{ placeholder_token|raw }}"> == {{ head }}

The issue where this change was introduced is: Move attachment processing to services and per-type response subclasses

And like this change record says this:

 <head-placeholder token="{{ placeholder_token|raw }}">

Just replace this:

{{ head }}

The token attribute is just for avoid collisions it doesn't have any other special purpose.

You can see at Theme.inc at the function template_preprocess_html the following code:

$types = [
  'styles' => 'css',
  'scripts' => 'js',
  'scripts_bottom' => 'js-bottom',
  'head' => 'head',
];
$variables['placeholder_token'] = Crypt::randomBytesBase64(55);
foreach ($types as $type => $placeholder_name) {
  $placeholder = '<' . $placeholder_name . '-placeholder token="' . 
  $variables['placeholder_token'] . '">';
  $variables['#attached']['html_response_attachment_placeholders'][$type] = $placeholder;
}

Which basically builds all the tokens and put them in the html_response_attachment_placeholders array.

Later when the page is being rendered the tokens are replaced by the data (scripts,styles etc) see HtmlResponseAttachmentsProcessor::processAttachments