const template = document.createElement('template');
template.innerHTML = `
	<style>
		div {
			padding: 1rem;
			border: 1px solid black;
			border-radius: 1rem;
			background: lightgray;
		}
	</style>
	<div>
		This component's name is "<span>empty</span>".
	</div>
`;

class XComponent extends HTMLElement {
	// To read attribute values, provide a list of your
	// attribute names to the observedAttributes() function.
	static get observedAttributes() {
		return ['name'];
	}

	// You can still provide an option to dynamically update
	// your attribute using JavaScript. NOTE: This requires
	// attributeChangedCallback() to actually sync together.
	set name(value) {
		this._name = value;
		this.nameElement.innerText = this._name;
	}
	
	get name() {
		return this._name;
	}
	
	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.appendChild(template.content.cloneNode(true));

		// Keep track of element references.
		this.nameElement = this.shadowRoot.querySelector('span');
	}
	
	// Handle any changes to attribute values.
	attributeChangedCallback(attrName, oldValue, newValue) {
		if (attrName === 'name') {
			this.name = newValue;
		}
	}
}

customElements.define('x-component', XComponent);