diff --git a/ascii_elements/mouse_4.html b/ascii_elements/mouse_4.html
index e2c5914..ed417f8 100644
--- a/ascii_elements/mouse_4.html
+++ b/ascii_elements/mouse_4.html
@@ -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>
 
 <!--
                 •                      -                          
diff --git a/ascii_elements/mouse_container.html b/ascii_elements/mouse_container.html
index 7dfd576..0441742 100644
--- a/ascii_elements/mouse_container.html
+++ b/ascii_elements/mouse_container.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>
diff --git a/index.html b/index.html
index 0a84d14..9e886a8 100644
--- a/index.html
+++ b/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">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
diff --git a/scripts/load_html.js b/scripts/load_html.js
index a98addc..d3b04c6 100644
--- a/scripts/load_html.js
+++ b/scripts/load_html.js
@@ -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));
+		}
+	},
+);
 
diff --git a/scripts/old_load_html.js b/scripts/old_load_html.js
new file mode 100644
index 0000000..97f0f2b
--- /dev/null
+++ b/scripts/old_load_html.js
@@ -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);
+
+
diff --git a/test_template_slots/index.html b/test_template_slots/index.html
new file mode 100644
index 0000000..1987051
--- /dev/null
+++ b/test_template_slots/index.html
@@ -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>
+
diff --git a/test_template_slots/test.html b/test_template_slots/test.html
new file mode 100644
index 0000000..d5d762c
--- /dev/null
+++ b/test_template_slots/test.html
@@ -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>
diff --git a/test_template_slots/test_2.html b/test_template_slots/test_2.html
new file mode 100644
index 0000000..df10e76
--- /dev/null
+++ b/test_template_slots/test_2.html
@@ -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>
+
diff --git a/test_template_slots/test_3.html b/test_template_slots/test_3.html
new file mode 100644
index 0000000..976c44f
--- /dev/null
+++ b/test_template_slots/test_3.html
@@ -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>
