In my project, I cannot use modern JS framework like React, I can only use HTML + JS + CSS. But I still want to create reusable components. I read this link, which introduced the HTML reusable components. Code as follows:

Navbar.js

class Navbar extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = `
        <style>
          nav {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:  #000000;
          }
          ......
        </style>
        <header>
          <nav>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="work.html">Work</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </header>
      `;
    }
}

customElements.define('navbar-component', Navbar);

This works fine as I just need to write <navbar-component></navbar-component> when I want to reuse it. However is there a way to separate the HTML and CSS from Navbar.js? So I could have Navbar.css which contains all CSS, and Navbar.html which contains all HTML? All I need to do is import Navbar.css and Navbar.html into Navbar.js?