simples/mode.html

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

<h3>Custom element simples</h3>

<custom-element data-mode="open">
	<h3>custom element 01 - aberto</h3>
</custom-element>

<custom-element data-mode="closed">
	<h3>custom element 02 - fechado</h3>
</custom-element>

<custom-element data-mode="open">
	<h3>custom element 03 - aberto</h3>
</custom-element>

<custom-element data-mode="closed">
	<h3>custom element 04 - fechado</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');
		const dataMode = this.dataset.mode;
		let shadowRoot = this.attachShadow({mode: dataMode});

		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);

testMode();

function testMode(){
	let elements = document.querySelectorAll('custom-element');
	let shadowroot = elements.shadowRoot;

	elements.forEach(function(el)
	{
		if (!el.shadowRoot) {
			console.warn(`Não é possível acessar o shadow DOM do elemento, portando suas propriedades internas: mode, host e innerHTML não estão disponíveis`);
			return false;
		}

		console.log(el.shadowRoot, '\n', el.shadowRoot.mode, '\n', el.shadowRoot.host, '\n', el.shadowRoot.innerHTML);
	});
}

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