yashaka/hyphenopoly-for-shadow-example.html

## hyphenopoly-for-shadow-example.html
<!DOCTYPE html>
<html>
<head>
	<title>Shadow DOM Creating</title>

	<style>
		h1	{
			color: #FF0000
		}
	</style>

	<script>
		var Hyphenopoly = {
		    require: {
		        "en-us": "FORCEHYPHENOPOLY",
		        "ru": "FORCEHYPHENOPOLY"
		    },
		    setup: {
		        CORScredentials: "omit",
		        selectors:
		        { "#allrecords": {}
		        // , ".markdown-body": {} // is included into #allrecords - the root tilda container
		        }
		    }
		};
		</script>
		<script src="https://cdn.jsdelivr.net/gh/mnater/Hyphenopoly@4.5.0/Hyphenopoly_Loader.js"></script>

		<script>
		const addLangs = (selectorsToLangs = {'p': 'ru'}) => {
		  for (let [selector, lang] of Object.entries(selectorsToLangs)) {
		    const elements = document.querySelectorAll(selector);
		    Array.prototype.slice.call(elements)
		      .forEach(it => it.setAttribute('lang', lang));
		  }
		}
	</script>
	<style type="text/css">
		body {
		    text-align: justify;
		    hyphens: auto;
		    -ms-hyphens: auto;
		    -moz-hyphens: auto;
		    -webkit-hyphens: auto;
		}
</style>
</head>
<body>
	<video controls></video>
	<input type="range" name="">
	<h1>Light DOM</h1>

	<p lang="en-us">
		(lang="en-us")For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.
	</p>

	<p lang="ru">
		(lang="ru") Во вы Им За На ею те. Иль Еще Нем лжи ини лес быв. Смертной Блажится Протекши Смятенью Сверкают Яры лук мудрость дал сне для Ему. Из Аз Кто ей на Он. Та Да плачевны священну рожденны Стрясите Он за свирепой За. Яркий То те Певец ты пустя взрос венце ум из равну Ее до. От бывый то со но Уж Ужели токмо уз Ты до. Мои ничей дел Никая сим тли видна меч зрю Век.
	</p>

	<div id="host"></div>

	<template>
		<h1>Shadow DOM</h1>
		<p lang="en-us">
		(lang="en-us")For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.
		</p>

		<p lang="ru">
		(lang="ru") Во вы Им За На ею те. Иль Еще Нем лжи ини лес быв. Смертной Блажится Протекши Смятенью Сверкают Яры лук мудрость дал сне для Ему. Из Аз Кто ей на Он. Та Да плачевны священну рожденны Стрясите Он за свирепой За. Яркий То те Певец ты пустя взрос венце ум из равну Ее до. От бывый то со но Уж Ужели токмо уз Ты до. Мои ничей дел Никая сим тли видна меч зрю Век.
		</p>
	</template>

	<script>
		var template = document.querySelector("template");
		var host = document.querySelector("#host");
		var root = host.createShadowRoot();
		root.appendChild(document.importNode(template.content, true));
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Shadow DOM Creating</title>

	<style>
	h1 {
	color: #FF0000
	}
	</style>

	<script>
	var Hyphenopoly = {
	require: {
	"en-us": "FORCEHYPHENOPOLY",
	"ru": "FORCEHYPHENOPOLY"
	},
	setup: {
	CORScredentials: "omit",
	selectors:
	{ "#allrecords": {}
	// , ".markdown-body": {} // is included into #allrecords - the root tilda container
	}
	}
	};
	</script>
	<script src="https://cdn.jsdelivr.net/gh/mnater/Hyphenopoly@4.5.0/Hyphenopoly_Loader.js"></script>

	<script>
	const addLangs = (selectorsToLangs = {'p': 'ru'}) => {
	for (let [selector, lang] of Object.entries(selectorsToLangs)) {
	const elements = document.querySelectorAll(selector);
	Array.prototype.slice.call(elements)
	.forEach(it => it.setAttribute('lang', lang));
	}
	}
	</script>
	<style type="text/css">
	body {
	text-align: justify;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	}
	</style>
	</head>
	<body>
	<video controls></video>
	<input type="range" name="">
	<h1>Light DOM</h1>

	<p lang="en-us">
	(lang="en-us")For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.
	</p>

	<p lang="ru">
	(lang="ru") Во вы Им За На ею те. Иль Еще Нем лжи ини лес быв. Смертной Блажится Протекши Смятенью Сверкают Яры лук мудрость дал сне для Ему. Из Аз Кто ей на Он. Та Да плачевны священну рожденны Стрясите Он за свирепой За. Яркий То те Певец ты пустя взрос венце ум из равну Ее до. От бывый то со но Уж Ужели токмо уз Ты до. Мои ничей дел Никая сим тли видна меч зрю Век.
	</p>

	<div id="host"></div>

	<template>
	<h1>Shadow DOM</h1>
	<p lang="en-us">
	(lang="en-us")For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.
	</p>

	<p lang="ru">
	(lang="ru") Во вы Им За На ею те. Иль Еще Нем лжи ини лес быв. Смертной Блажится Протекши Смятенью Сверкают Яры лук мудрость дал сне для Ему. Из Аз Кто ей на Он. Та Да плачевны священну рожденны Стрясите Он за свирепой За. Яркий То те Певец ты пустя взрос венце ум из равну Ее до. От бывый то со но Уж Ужели токмо уз Ты до. Мои ничей дел Никая сим тли видна меч зрю Век.
	</p>
	</template>

	<script>
	var template = document.querySelector("template");
	var host = document.querySelector("#host");
	var root = host.createShadowRoot();
	root.appendChild(document.importNode(template.content, true));
	</script>
	</body>
	</html>