186 lines
4.4 KiB
HTML
186 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Slot Example</title>
|
|
</head>
|
|
<body>
|
|
<!-- Template 1 -->
|
|
<template id="template1">
|
|
<h1><slot name="heading">default</slot></h1>
|
|
<slot name="tel"></slot>
|
|
<p><slot name="paragraph">default</slot></p>
|
|
|
|
<div class="insert_html" data-template="template2">
|
|
<!--
|
|
<span slot="second_paragraph">paragraph 3</span>
|
|
-->
|
|
</div>
|
|
|
|
<style>
|
|
h1 {
|
|
font-size: 2em;
|
|
font-family: monospace;
|
|
color: darkorange;
|
|
}
|
|
p {
|
|
border-left: 3px solid darkorange;
|
|
padding-left: 1em;
|
|
}
|
|
</style>
|
|
</template>
|
|
|
|
<template id="template2">
|
|
<p><slot name="second_paragraph">default template 2</slot></p>
|
|
<style>
|
|
h1 {
|
|
font-size: 2em;
|
|
font-family: monospace;
|
|
color: blue;
|
|
}
|
|
p {
|
|
border-left: 3px solid blue;
|
|
padding-left: 1em;
|
|
}
|
|
</style>
|
|
</template>
|
|
|
|
<template id="template_3">
|
|
<p><slot></slot></p>
|
|
<load-html data-path="template_4"></load-html>
|
|
<style>
|
|
h1 {
|
|
font-size: 2em;
|
|
font-family: monospace;
|
|
color: blue;
|
|
}
|
|
p {
|
|
border-left: 3px solid blue;
|
|
padding-left: 1em;
|
|
}
|
|
</style>
|
|
</template>
|
|
|
|
<template id="template_4">
|
|
<p>template 4 !</p>
|
|
<style>
|
|
h1 {
|
|
font-size: 2em;
|
|
font-family: monospace;
|
|
color: green;
|
|
}
|
|
p {
|
|
border-left: 3px solid green;
|
|
padding-left: 1em;
|
|
}
|
|
</style>
|
|
</template>
|
|
|
|
<!-- Content -->
|
|
<div id="">
|
|
<p>titre 0</p>
|
|
<p>paragraph 0</p>
|
|
</div>
|
|
|
|
<load-html data-path="template_3">
|
|
<span>test default 3</span>
|
|
</load-html>
|
|
|
|
<load-html-2 data-path="./test_3.html">
|
|
<span slot>first slot</span>
|
|
<p slot="slot2">test default 3 . 2</p>
|
|
</load-html-2>
|
|
|
|
<div class="insert_html" data-template="template1">
|
|
<span slot="heading">titre 1</span>
|
|
<span slot="paragraph">paragraph 1</span>
|
|
</div>
|
|
<div class="insert_html" data-template="template1">
|
|
<span slot="heading">titre 2</span>
|
|
<span slot="paragraph">paragraph 2</span>
|
|
</div>
|
|
<div class="insert_html" data-template="template1">
|
|
<p slot="tel">07</p>
|
|
</div>
|
|
|
|
<!-- Script
|
|
-->
|
|
<script>
|
|
|
|
var inserts = document.querySelectorAll('.insert_html');
|
|
console.log("inserts: ", inserts);
|
|
|
|
inserts.forEach(function(insert) {
|
|
let target_template = insert.dataset.template;
|
|
let template = document.querySelector(`#${target_template}`).content;
|
|
insert
|
|
.attachShadow({mode:'open'})
|
|
.appendChild(template.cloneNode(true));
|
|
});
|
|
|
|
customElements.define(
|
|
"load-html",
|
|
class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
let path = this.dataset.path;
|
|
let template = document.getElementById(path);
|
|
console.log("template1: ", template);
|
|
let templateContent = template.content;
|
|
console.log("templateContent 1: ", templateContent);
|
|
|
|
const shadowRoot = this.attachShadow({ mode: "open" });
|
|
shadowRoot.appendChild(templateContent.cloneNode(true));
|
|
}
|
|
},
|
|
);
|
|
|
|
customElements.define(
|
|
"load-html-2",
|
|
class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
let path = this.dataset.path;
|
|
let templateContent = document.createDocumentFragment();
|
|
fetch(path)
|
|
.then(response => response.text())
|
|
.then(content_to_load => {
|
|
let template = document.createElement('template');
|
|
template.innerHTML = content_to_load;
|
|
templateContent = template.content;
|
|
const shadowRoot = this.attachShadow({ mode: "open" });
|
|
shadowRoot.appendChild(templateContent.cloneNode(true));
|
|
})
|
|
.catch(error => console.log('Error:', error));
|
|
|
|
|
|
}
|
|
},
|
|
);
|
|
|
|
|
|
|
|
// const callback = (mutation_list, observer) => load_html();
|
|
// const observer = new MutationObserver(callback);
|
|
// const targetNode = document.body;
|
|
// const config = { attributes: true, childList: true, subtree: true };
|
|
// // Start observing the target node for configured mutations
|
|
// observer.observe(targetNode, config);
|
|
//
|
|
// function load_html() {
|
|
// let elements = document.getElementsByClassName("insert_html");
|
|
// for (let element_to_replace of elements) {
|
|
// let path = (element_to_replace.dataset.path);
|
|
// if (!path)
|
|
// continue;
|
|
// fetch(path)
|
|
// .then(response => response.text())
|
|
// .then(content_to_load => replace_html(element_to_replace, content_to_load))
|
|
// .catch(error => console.log('Error:', error));
|
|
// };
|
|
// }
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|