class Pet extends HTMLElement {
	constructor() {
		super(); 

		const shadow = this.attachShadow({ mode: 'closed' });

		const root = document.createElement('section');

		const name = this.getAttribute('name')

		root.innerHTML = `
			<h2>Pet</h2>
			<dl>
				<dt>Name</dt>
				<dd>${name}</dd>
			</dl>
		`;

		root.querySelector('h2').addEventListener('click', ()=>{
			alert('hi')
		})

		shadow.appendChild(root)
	}
}

customElements.define('pet-component', Pet);