simples/template.html

<html>
<head>
	<title>Custom Element simples</title>
</head>
<body>

<h3>Custom element simples</h3>

<custom-element>
	<h3>custom element 01 - aberto</h3>
</custom-element>

<custom-element>
	<h3>custom element 02 - aberto</h3>
</custom-element>

<custom-element>
	<h3>custom element 03 - aberto</h3>
</custom-element>

<custom-element>
	<h3>custom element 04 - aberto</h3>
</custom-element>

<template id="myFirstWebcomponent">
	<style>
		h3{
			color: #ff9100;
			font-size: 2rem;
		}
	</style>

	<h3>Hello world!</h3>
	<slot></slot>
</template>
	
<script>
class CustomElementClass extends HTMLElement
{
	constructor()
	{
		super();

		const template = document.getElementById('myFirstWebcomponent');

		let shadowRoot = this.attachShadow({mode: 'open'});

		shadowRoot.appendChild(template.content.cloneNode(true));
	}
}

if(!'customElements' in window) {
	console.error( new Error('Seu browser não suporta a customElements') );
}

customElements.define('custom-element', CustomElementClass);

</script>
</body>
</html>