I am teaching an HTML5 class and one student did this for his header:

<script src="elements/header.js"></script>
    <script>
      header("Home");
    </script>

The linked file looks like this:

function header(name){
    document.write(`
        
        <header
      style="
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      "
    >
      <h1>Science Fiction</h1>
      <h2>${name}</h2>
    </header>
    <hr />
        
    `);
}

He also did this for the footer and navbar. It works, but in all my years of web development, I've never seen it done this way. For one thing, I see no reason to include CSS in a linked JavaScript file when you could just put it in a linked CSS file. But beyond that, I'm wondering if web developers don't do this because it might affect SEO. Does dynamically linking to content prevent that content from being indexed by search engines? This is for a student project so SEO doesn't matter, just wondering from a best practices standpoint.