create npm package that renders html/css when class is newed

Im not sure where to look to get information on how to create my own npm package that when the exported class is newed up, it can can render an html element(s) with the associated css classes.

Sample of what i'm looking for: (npm package i'm creating)

index.js

class MyCustomClass{
  constructor(element) {
    // element is an existing HTML element the user provides
    // I want the code here to render the index.html content with the css..
  }
}

export default MyCustomClass;

index.html

<div id="belongs-to-my-custom-class" class="class1 class2 etc">
  <! -- all my HTML markup here, with all my css classes.
</div>

After npm install my above package. Below will be any project that i want to import the above package into. Vue app for example

<template>
  <div id="my-npm-comp"></div>
</template>

<script>
  import MyCustomClass from 'published-npm-package';

  export default{
    data: () => ({
      elem: null
    }),
    mounted() {
      this.elem = new MyCustomClass('my-npm-comp');
    }
  };
</script>

I know i could do this all in Vue but my purpose here is that this custom npm package would work in any javascript application. Im sure i need some type of templating plugin but i need guidance or an article that gives examples of what im trying to do.