54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
|
|
// 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));
|
|
}
|
|
},
|
|
);
|
|
|