changed the loading function by a custom html element
This commit is contained in:
asus
@@ -1,5 +1,6 @@
|
||||
|
||||
<div class="load_html" data-path="ascii_elements/mouse_container.html" data-path_target="mouse_frame">
|
||||
<load-html data-path="ascii_elements/mouse_container.html">
|
||||
<div slot>
|
||||
|
||||
<pre class="mouse f1">
|
||||
•
|
||||
@@ -158,6 +159,7 @@
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</load-html>
|
||||
|
||||
<!--
|
||||
• -
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<div class="mouse_container">
|
||||
<div class="content_html" data-path_target="mouse_frame"></div>
|
||||
<slot class="content_html"></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
25
index.html
25
index.html
@@ -3,21 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!--
|
||||
create "fake" favicon to avoid browser complaining about not getting it
|
||||
https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests
|
||||
replace will real favicon if you want one
|
||||
<link rel="icon" href="data:;base64,=">
|
||||
<link rel="icon" href="data:,">
|
||||
-->
|
||||
<!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<title>hugulumu.fr</title>
|
||||
<meta name="description" content="site web de hugo lamy, developpeur">
|
||||
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
|
||||
<!--
|
||||
<meta name="keywords" content="truc, bidule, chouette">
|
||||
<link href="./style.css" type="text/css" rel="stylesheet">
|
||||
-->
|
||||
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
@@ -41,13 +34,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="load_html" data-path="ascii_elements/name.html"></div>
|
||||
<div class="load_html" data-path="ascii_elements/mouse_1.html"></div>
|
||||
<div class="load_html" data-path="ascii_elements/mouse_2.html"></div>
|
||||
<div class="load_html" data-path="ascii_elements/mouse_3.html"></div>
|
||||
<div class="load_html" data-path="ascii_elements/mouse_4.html"></div>
|
||||
<load-html data-path="ascii_elements/name.html"></load-html>
|
||||
<load-html data-path="ascii_elements/mouse_1.html"></load-html>
|
||||
<load-html data-path="ascii_elements/mouse_2.html"></load-html>
|
||||
<load-html data-path="ascii_elements/mouse_3.html"></load-html>
|
||||
<load-html data-path="ascii_elements/mouse_4.html"></load-html>
|
||||
|
||||
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
|
||||
<load-html data-path="ascii_elements/banner_1.html"></load-html>
|
||||
|
||||
<pre class="banner reverse t1_0">
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
@@ -63,7 +56,7 @@
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
</pre>
|
||||
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
|
||||
<div class="insert_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
|
||||
<pre class="banner t0_5">
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
|
||||
@@ -1,86 +1,29 @@
|
||||
|
||||
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
|
||||
function deserialize_html(html) {
|
||||
let template = document.createElement('template');
|
||||
template.innerHTML = html;
|
||||
return template.content.children;
|
||||
// use .children instead of childNodes to avoid #text elements :
|
||||
// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
|
||||
//return template.content.childNodes;
|
||||
}
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
|
||||
|
||||
function fill_content(new_content, old_content, target_name) {
|
||||
let elements_with_class = find_elements_by_class(new_content, "content_html");
|
||||
let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
|
||||
elements_to_fill.forEach(el => el.outerHTML = old_content);
|
||||
}
|
||||
customElements.define(
|
||||
"load-html",
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
|
||||
function find_elements_by_class(html_collection, class_to_find) {
|
||||
for (element of html_collection) {
|
||||
if (element.nodeName === "STYLE")
|
||||
continue;
|
||||
if (element.nodeName === "SCRIPT")
|
||||
continue;
|
||||
return element.getElementsByClassName(class_to_find);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
super();
|
||||
|
||||
function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
|
||||
let matching_elements = [];
|
||||
if (!data_to_compare)
|
||||
return matching_elements;
|
||||
for (element of html_collection) {
|
||||
let path = this.dataset.path;
|
||||
let templateContent = document.createDocumentFragment();
|
||||
|
||||
let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
|
||||
//let data = element.dataset[dataset_name];
|
||||
let load_content = (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));
|
||||
}
|
||||
|
||||
//if (data_to_compare === data)
|
||||
matching_elements.push(...data);
|
||||
}
|
||||
// if (data_to_compare === "banner")
|
||||
return matching_elements;
|
||||
}
|
||||
|
||||
function transfert_class(element, new_content) {
|
||||
let class_target = element.dataset.class_target;
|
||||
let new_class = element.dataset.new_class;
|
||||
if (!class_target)
|
||||
return;
|
||||
if (!new_class)
|
||||
return;
|
||||
let elements_with_class = find_elements_by_data(new_content, class_target, "class_target");
|
||||
elements_with_class.forEach(el => el.classList.add(new_class));
|
||||
}
|
||||
|
||||
function replace_html(element_to_replace, content_to_load) {
|
||||
let old_content = element_to_replace.innerHTML;
|
||||
let new_content = deserialize_html(content_to_load);
|
||||
let target_name = element_to_replace.dataset.path_target;
|
||||
transfert_class(element_to_replace, new_content);
|
||||
console.log("new_content: ", new_content);
|
||||
// fill_content(new_content, old_content, target_name);
|
||||
element_to_replace.replaceWith(...new_content);
|
||||
};
|
||||
|
||||
function load_html() {
|
||||
let elements = document.getElementsByClassName("load_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));
|
||||
};
|
||||
}
|
||||
|
||||
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
|
||||
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);
|
||||
fetch(path)
|
||||
.then(response => response.text())
|
||||
.then(load_content)
|
||||
.catch(error => console.log('Error:', error));
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
169
scripts/old_load_html.js
Normal file
169
scripts/old_load_html.js
Normal file
@@ -0,0 +1,169 @@
|
||||
|
||||
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
|
||||
function deserialize_html(html) {
|
||||
let template = document.createElement('template');
|
||||
template.innerHTML = html;
|
||||
return template.content.children;
|
||||
// use .children instead of childNodes to avoid #text elements :
|
||||
// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
|
||||
//return template.content.childNodes;
|
||||
}
|
||||
|
||||
function fill_content(new_content, old_content, target_name) {
|
||||
// new_content :
|
||||
// <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// old_content :
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
// target_name :
|
||||
// banner
|
||||
if (!old_content)
|
||||
return;
|
||||
let elements_with_class = find_elements_by_class(new_content, "content_html");
|
||||
// elements_with_class :
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
|
||||
// elements_to_fill :
|
||||
elements_to_fill.forEach(el => el.outerHTML = old_content);
|
||||
}
|
||||
|
||||
function find_elements_by_class(html_collection, class_to_find) {
|
||||
// html_collection :
|
||||
// <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// class_to_find :
|
||||
// content_html
|
||||
for (element of html_collection) {
|
||||
if (element.nodeName === "STYLE")
|
||||
continue;
|
||||
if (element.nodeName === "SCRIPT")
|
||||
continue;
|
||||
return element.getElementsByClassName(class_to_find);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
|
||||
// html_collection :
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// data_to_compare :
|
||||
// banner
|
||||
// dataset_name :
|
||||
// path_target
|
||||
let matching_elements = [];
|
||||
if (!data_to_compare)
|
||||
return matching_elements;
|
||||
for (element of html_collection) {
|
||||
|
||||
let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
|
||||
//let data = element.dataset[dataset_name];
|
||||
|
||||
//if (data_to_compare === data)
|
||||
matching_elements.push(...data);
|
||||
}
|
||||
// if (data_to_compare === "banner")
|
||||
return matching_elements;
|
||||
}
|
||||
|
||||
function transfert_class(element, new_content) {
|
||||
// element :
|
||||
// <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
// </div>
|
||||
// new_content :
|
||||
// <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
let class_target = element.dataset.class_target;
|
||||
// --
|
||||
let new_class = element.dataset.new_class;
|
||||
// --
|
||||
if (!class_target)
|
||||
return;
|
||||
if (!new_class)
|
||||
return;
|
||||
let elements_with_class = find_elements_by_data(new_content, class_target, "class_target");
|
||||
elements_with_class.forEach(el => el.classList.add(new_class));
|
||||
}
|
||||
|
||||
// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
|
||||
// content_to_load : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
// </div>
|
||||
//
|
||||
//
|
||||
// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
// </div>
|
||||
// content_to_load : <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
//
|
||||
//
|
||||
function replace_html(element_to_replace, content_to_load) {
|
||||
let old_content = element_to_replace.innerHTML;
|
||||
// old_content :
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
let new_content = deserialize_html(content_to_load);
|
||||
// new_content :
|
||||
// <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
let target_name = element_to_replace.dataset.path_target;
|
||||
// target_name :
|
||||
// banner
|
||||
transfert_class(element_to_replace, new_content);
|
||||
// element_to_replace :
|
||||
// <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
||||
// <pre class="banner" data-class_target="banner">
|
||||
// </pre>
|
||||
// </div>
|
||||
// new_content :
|
||||
// <div class="banner_container">
|
||||
// <div class="content_html" data-path_target="banner"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// console.log("new_content: ", new_content);
|
||||
fill_content(new_content, old_content, target_name);
|
||||
// new_content :
|
||||
// old_content :
|
||||
// target_name :
|
||||
element_to_replace.replaceWith(...new_content);
|
||||
};
|
||||
|
||||
function load_html() {
|
||||
let elements = document.getElementsByClassName("load_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));
|
||||
};
|
||||
}
|
||||
|
||||
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
|
||||
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);
|
||||
|
||||
|
||||
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>
|
||||
|
||||
18
test_template_slots/test.html
Normal file
18
test_template_slots/test.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<template id="template1">
|
||||
<h1><slot name="heading">default</slot></h1>
|
||||
<slot name="tel"></slot>
|
||||
<p><slot name="paragraph">default</slot></p>
|
||||
<span class="insert_html" data-template="template2" slot="second_paragraph">paragraph 3</span>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-family: monospace;
|
||||
color: darkorange;
|
||||
}
|
||||
p {
|
||||
border-left: 3px solid darkorange;
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
18
test_template_slots/test_2.html
Normal file
18
test_template_slots/test_2.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<p part="title"><slot name="second_paragraph">default test_2.html</slot></p>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-family: monospace;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
border-left: 3px solid blue;
|
||||
padding-left: 1em;
|
||||
}
|
||||
p {
|
||||
/*
|
||||
background-color: lightblue;
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
|
||||
38
test_template_slots/test_3.html
Normal file
38
test_template_slots/test_3.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<p>hello from the other side</p>
|
||||
<p><slot class="border_red"></slot></p>
|
||||
<p>the end</p>
|
||||
<slot name="slot2" class="border_blue"></slot>
|
||||
<div class="border_red">
|
||||
<load-html-2 data-path="./test_2.html"></load-html>
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<style>
|
||||
/*
|
||||
:host {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
::slotted(span) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
load_html::part(title) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-family: monospace;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
border-left: 3px solid blue;
|
||||
padding-left: 1em;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.border_red {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.border_blue {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user