devansvd/shadow-dom.html

## shadow-dom.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Dom</title>
	</head>

	<body style="text-align: center;">
		<!-- <script>
			// If this code is executed before element defn all closed shadow dom accessable
			Element.prototype._attachShadow = Element.prototype.attachShadow;
			Element.prototype.attachShadow = function () {
				return this._attachShadow({ mode: "open" });
			};
		</script> -->
		<style>
			p {
				background-color: yellow;
			}

			section {
				border: 1px solid black;
				margin: 25px;
				padding: 20px;
			}

			h2 {
				text-align: center;
			}
		</style>
		<section>
			<h2>Shadow dom using div</h2>
			<p>Paragraph tag outside shadow</p>
			<div id="elem"></div>
			<button name="btn-el-one" onclick="changeElOne()">Click</button>
			<script>
				elem.attachShadow({ mode: 'open' });
				console.log("shadow root element 1", elem.shadowRoot)
				if (elem.shadowRoot !== null && elem.shadowRoot.host === elem) {
					elem.shadowRoot.innerHTML = `
					<style> p { font-weight: bold; color: red; } </style>
					<p>Hello! Inner Paragraph tag not affected by outer style</p>`;
				} else {
					console.log("Shadow dom not accessible, it is closed")
				}
				const changeElOne = () => {
					let el = document.getElementById("elem");
					if (el.shadowRoot) {
						el.shadowRoot.querySelectorAll('p')[0].innerHTML = "Shadow dom value changed elem 1";
					} else {
						console.log("Shadow dom not accessible, it is closed", el.shadowRoot)
					}
				}
			</script>
		</section>

		<section>
			<h2>Shadow dom using custom web component</h2>
			<my-web-component id="customElem"></my-web-component>
			<script>
				class MyWebComponent extends HTMLElement {
					constructor() {
						super();
						this.attachShadow({ mode: "open" });
					}
					connectedCallback() {
						this.shadowRoot.innerHTML = `
						<style>
							p { color: blue; font-weight: bold;}
						</style>
						<p>I'm in the Shadow Root!</p>`;
					}
				}
				window.customElements.define("my-web-component", MyWebComponent);
				let el = document.querySelector("my-web-component")
				console.log("shadow root element 2", el);
			</script>
		</section>

		<section>
			<h2>Manually holding reference to Access Closed Shadow dom</h2>
			<closed-dom id="closedDom"></closed-dom>
			<script>
				class MyWebComponentTwo extends HTMLElement {
					constructor() {
						super();
						this._root = this.attachShadow({ mode: "closed" });
					}
					connectedCallback() {
						this._root.innerHTML = `
						<style>
							p { color: blue; font-weight: bold;}
						</style>
						<p>I'm in the closed Shadow Root visible!</p>`;
					}
				}
				window.customElements.define("closed-dom", MyWebComponentTwo);
				const $myWebComponent = document.querySelector("closed-dom");
				console.log("$myWebComponent.shadowRoot", $myWebComponent.shadowRoot);
				console.log("$myWebComponent._root", $myWebComponent._root)
				//$myWebComponent._root.querySelector("p").innerText = "Modified!";
			</script>
		</section>

		<article style="margin: 30px;text-align: left;">
			<h4>Ref:</h4>
			<ul>
				<li>
					<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">
						https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af
					</a>
				</li>
				<li>
					<a
						href="https://developers.google.com/web/fundamentals/web-components/shadowdom">
						https://developers.google.com/web/fundamentals/web-components/shadowdom
					</a>
				</li>
				<li>
					<a href="https://javascript.info/shadow-dom">
						https://javascript.info/shadow-dom
					</a>
				</li>
			</ul>
		</article>


	</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dom</title>
	</head>

	<body style="text-align: center;">
	<!-- <script>
	// If this code is executed before element defn all closed shadow dom accessable
	Element.prototype._attachShadow = Element.prototype.attachShadow;
	Element.prototype.attachShadow = function () {
	return this._attachShadow({ mode: "open" });
	};
	</script> -->
	<style>
	p {
	background-color: yellow;
	}

	section {
	border: 1px solid black;
	margin: 25px;
	padding: 20px;
	}

	h2 {
	text-align: center;
	}
	</style>
	<section>
	<h2>Shadow dom using div</h2>
	<p>Paragraph tag outside shadow</p>
	<div id="elem"></div>
	<button name="btn-el-one" onclick="changeElOne()">Click</button>
	<script>
	elem.attachShadow({ mode: 'open' });
	console.log("shadow root element 1", elem.shadowRoot)
	if (elem.shadowRoot !== null && elem.shadowRoot.host === elem) {
	elem.shadowRoot.innerHTML = `
	<style> p { font-weight: bold; color: red; } </style>
	<p>Hello! Inner Paragraph tag not affected by outer style</p>`;
	} else {
	console.log("Shadow dom not accessible, it is closed")
	}
	const changeElOne = () => {
	let el = document.getElementById("elem");
	if (el.shadowRoot) {
	el.shadowRoot.querySelectorAll('p')[0].innerHTML = "Shadow dom value changed elem 1";
	} else {
	console.log("Shadow dom not accessible, it is closed", el.shadowRoot)
	}
	}
	</script>
	</section>

	<section>
	<h2>Shadow dom using custom web component</h2>
	<my-web-component id="customElem"></my-web-component>
	<script>
	class MyWebComponent extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: "open" });
	}
	connectedCallback() {
	this.shadowRoot.innerHTML = `
	<style>
	p { color: blue; font-weight: bold;}
	</style>
	<p>I'm in the Shadow Root!</p>`;
	}
	}
	window.customElements.define("my-web-component", MyWebComponent);
	let el = document.querySelector("my-web-component")
	console.log("shadow root element 2", el);
	</script>
	</section>

	<section>
	<h2>Manually holding reference to Access Closed Shadow dom</h2>
	<closed-dom id="closedDom"></closed-dom>
	<script>
	class MyWebComponentTwo extends HTMLElement {
	constructor() {
	super();
	this._root = this.attachShadow({ mode: "closed" });
	}
	connectedCallback() {
	this._root.innerHTML = `
	<style>
	p { color: blue; font-weight: bold;}
	</style>
	<p>I'm in the closed Shadow Root visible!</p>`;
	}
	}
	window.customElements.define("closed-dom", MyWebComponentTwo);
	const $myWebComponent = document.querySelector("closed-dom");
	console.log("$myWebComponent.shadowRoot", $myWebComponent.shadowRoot);
	console.log("$myWebComponent._root", $myWebComponent._root)
	//$myWebComponent._root.querySelector("p").innerText = "Modified!";
	</script>
	</section>

	<article style="margin: 30px;text-align: left;">
	<h4>Ref:</h4>
	<ul>
	<li>
	<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">
	https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af
	</a>
	</li>
	<li>
	<a
	href="https://developers.google.com/web/fundamentals/web-components/shadowdom">
	https://developers.google.com/web/fundamentals/web-components/shadowdom
	</a>
	</li>
	<li>
	<a href="https://javascript.info/shadow-dom">
	https://javascript.info/shadow-dom
	</a>
	</li>
	</ul>
	</article>


	</body>

	</html>