devansvd · May 12, 2020 02:04
diff --git a/shadow-dom.html b/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>