Data rendered inside the <head> tag is automatically moved to <body>

Something very similar has already been reported in https://github.com/tj/ejs/issues/176. That issue is very old though, so I am not sure whether it's the same problem or not.

I have the following (simplified) render call:

import { render } from 'ejs';

const template = `
  <!DOCTYPE html>
  <html>
    <head>
      <title>
        Title of the page
      </title>

      <svg id="icons">
        <%- icons %>
      </svg>

      <%- styles %>
    </head>

    <body>
      Body goes here...
    </body>
  </html>
`;

const rendered = render(template, {
  icons: `
    <symbol viewBox="...">
      <g>...</g>
    </symbol>

    <symbol viewBox="...">
      <g>...</g>
    </symbol>

    <symbol viewBox="...">
      <g>...</g>
    </symbol>
  `,
  styles: `
    <style>
      .style1 { ... };

      .style 2 { ... };
    </style>
  `,
});

When printing "rendered" into the node console, the resulting document looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Title of the page
    </title>
  </head>

  <body>
    <svg id="icons">
      <symbol viewBox="...">
        <g>...</g>
      </symbol>

      <symbol viewBox="...">
        <g>...</g>
      </symbol>

      <symbol viewBox="...">
        <g>...</g>
      </symbol>
    </svg>

    <style>
      .style1 { ... };

      .style 2 { ... };
    </style>

    Body goes here...
  </body>
</html>

For some reason, the <style> and <svg> tags are moved automatically inside the body. Is there any configuration I am missing?

tj / ejs

Data rendered inside the <head> tag is automatically moved to <body> #259