Its extremely easy to create vanilla custom elements with classes and template strings.

web-component-class-example.js

'use strict';

class NameCard extends HTMLElement {
    set name(val) {
        this._name = val;
        
        this.render();
    }
    get name() {
        return this._name;
    }
    
    set jobTitle(val) {
        this._jobTitle = val;
        
        this.render();
    }
    get jobTitle() {
        return this._jobTitle;
    }
    
    createdCallback() {
        this.render();
    }

    attributeChangedCallback() {
        this._name = this.getAttribute('name');
        this._jobTitle = this.getAttribute('job-title');
        
        this.render();
    }
    
    // Very simple for simple things. but this is where you would your diffing and more complex rendering business
    render() {
        this.innerHTML = this.template();
    }

    template() {
        return `
            <h3>${this.name}</h3>
            <p>${this.jobTitle}</p>
        `;
    }
}

export default document.registerElement('name-card', NameCard);

That is so tasty

thanks! :)