title: Heading in javascript or html in a component-based design for website
body: <p>I like the component based method of creating different folders for different components.
  So I currently have:</p>
  <pre><code>- components/
    - heading/
      - heading.css
      - heading.js
      - heading.html
  </code></pre>
  <p>I want my html to look like the code below for the heading (includes both bootstrap and custom css classes):</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;container text-white&quot;&gt;
          &lt;div class=&quot;position-relative pb-5&quot;&gt;
              &lt;h1 class=&quot;position-absolute top-0 start-50 translate-middle-x display-1&quot;&gt;HEADING&lt;/h1&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>How do I achieve this? Should I import this <code>html</code> into <code>js</code> (I am using webpack) or should I add these classes manually in <code>js</code> after creating and appending the two <code>div</code>s to the body?
  I know the second option is tedious but I don't think the first option will make the heading reusable for other pages. Is there a better way that I have not mentioned?</p>