// https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots

customElements.define(
	"load-html",
	class extends HTMLElement {
		constructor() {

			super();

			let path = this.dataset.path;

			let load_content = (content_to_load) => {
					let template = document.createElement('template');
					template.innerHTML = content_to_load;
					let templateContent = template.content;
					//this.appendChild(templateContent.cloneNode(true));
					this.replaceWith(templateContent.cloneNode(true));
			}

			fetch(path)
				.then(response => response.text())
				.then(load_content)
				.catch(error => console.log('Error:', error));
		}
	},
);

customElements.define(
	"load-html-shadow",
	class extends HTMLElement {
		constructor() {

			super();

			let path = this.dataset.path;

			let load_content = (content_to_load) => {
					let template = document.createElement('template');
					template.innerHTML = content_to_load;
					let templateContent = template.content;
					const shadowRoot = this.attachShadow({ mode: "open" });
					shadowRoot.appendChild(templateContent.cloneNode(true));
			}

			fetch(path)
				.then(response => response.text())
				.then(load_content)
				.catch(error => console.log('Error:', error));
		}
	},
);