Web Component boilerplate for a native web-component (v1 spec)

WebComponent.js

/*
* Use tag to import via es6 module (html import deprecated in v1 spec :/ )
* <script type="module" src="../components/web-component/web-component.js"></script>
*/
'use strict()'

const template = document.createElement('template')
template.innerHTML = /*html*/`
<style>
.card {
	padding: 1rem;
    border-radius: 5px;
    max-width: 100%;
    min-height: 20rem;
    background: #EEE;
}
</style>
<div class="card">
    <h3>Example DOM</h3>
    <input class="name" placeholder="Name"/>
    <br />
    <button class="save">Save</button>
</div>`

export class WebComponent extends HTMLElement {

    constructor() {
        super()
        //console.log('hi from constructor')
        this.attachShadow({mode: 'open'})
    }
	
    static get is() {
        return 'web-component'
    }

    static get observedAttributes() {
        return ['projects']
    }

    connectedCallback() {
        this.shadowRoot.appendChild(template.content.cloneNode(true))
        
        this.registerElements(this.shadowRoot)
    }
	
    registerElements(doc){
        //console.log('registerElements')
        
        this.dom = {
            name: doc.querySelector('.name'),
            save: doc.querySelector('.save')
        }
	    
		this.registerListeners()
    }
	
	registerListeners(){
	
        this.dom.save.onclick = () => {
            console.log('CLICK ', this.dom.name.value)
        }
	}
	
    attributeChangedCallback(n, ov, nv) {
        super.attributeChangedCallback(n, ov, nv);
        console.dir(n)
        console.dir(ov)
        console.dir(nv)
        //switch (n) {
        //    case 'attr name that changed!':
        //        ov !== nv // old val not equal new val
        //        break;
        //}
    }
}

customElements.define(WebComponent.is, WebComponent)