changed the loading function by a custom html element
This commit is contained in:
asus
185
test_template_slots/index.html
Normal file
185
test_template_slots/index.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user