// Make a new dynamic template.
const template = document.createElement('template');
template.innerHTML = `
	<style>
		/* We can add styles inside our template. */
		div {
			padding: 1rem;
			border: 1px solid black;
			border-radius: 1rem;
			background: lightgray;
		}
	</style>
	<!-- And any other HTML we want too. -->
	<div>
		<!--
			To render dynamic "slotted" content,
			add a slot element:
		-->
		This component's name is "<span>empty</span>".
	</div>
`;

class XComponent extends HTMLElement {
	set name(value) {
		this._name = value;
		this.nameElement.innerText = this._name;
	}
	
	get name() {
		return this._name;
	}
	
	constructor() {
		super();
		
		// Slots require the "Shadow DOM" API.
		// Shadow DOM also encapsulates CSS (and other cool features).
		// attachShadow() creates a shadow root instance.
		this.attachShadow({ mode: 'open' });
		
		// Instead of simply appending to our component's HTML,
		// now we append to its shadow root...
		this.shadowRoot.appendChild(template.content.cloneNode(true));
		
		// Now I can also set child nodes to named properties.
		this.nameElement = this.shadowRoot.querySelector('span');
	}
}

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

// Dynamically set the name for our component.
document.querySelector('x-component').name = 'Example 2';