{"id":10158,"date":"2023-01-12T16:58:01","date_gmt":"2023-01-12T11:28:01","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=10158"},"modified":"2023-01-13T07:37:09","modified_gmt":"2023-01-13T02:07:09","slug":"shadow-dom","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/shadow-dom\/","title":{"rendered":"Shadow DOM"},"content":{"rendered":"\n<p>\u091c\u092c \u092d\u0940 \u0939\u092e\u0947 \u0915\u094b\u0908 Custom Dom \u092f\u093e Element \u092c\u0928\u093e\u0928\u093e \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0924\u092c \u0939\u092e shadow DOM \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 Shadow DOM API \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e Code \u0915\u094b Hide \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902, \u0914\u0930 \u092e\u0941\u0916\u094d\u092f Code \u0914\u0930 Shadow Code \u0915\u094b \u0905\u0932\u0917 \u0930\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u092f\u0939 \u0926\u094b\u0928\u094b\u0902 \u0939\u0940 Code \u0906\u092a\u0938 \u092e\u0947 Clash \u092d\u0940 \u0928\u0939\u0940\u0902 \u0939\u094b\u0924\u0947 \u0939\u0948\u0902\u0964 \u0907\u0938\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u0938\u0947 Code \u0915\u094b \u0938\u093e\u092b \u0938\u0941\u0925\u0930\u093e \u0930\u0916\u093e \u091c\u093e \u0938\u0915\u0924\u093e \u0939\u0948\u0902 \u0915\u094d\u092f\u0941\u0915\u0940 Custom Element \u092c\u0928\u093e \u0915\u0930 \u0939\u092e Repetitive  Code \u0915\u094b \u0915\u092e \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 Shadow DOM \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e HTML Structure, Style \u0914\u0930 Behavior \u0915\u094b Main Code \u0938\u0947 Separate \u0914\u0930 Hide \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964   <\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#1-shadow-dom-using-static-creation-inner-html\">1. Shadow DOM Using Static Creation (InnerHTML)<\/a><ul><li><a href=\"#1-1-java-script-code\">1.1 JavaScript Code<\/a><\/li><li><a href=\"#1-2-html-code\">1.2 HTML Code<\/a><\/li><li><a href=\"#1-3-output\">1.3 Output <\/a><\/li><\/ul><\/li><li><a href=\"#2-shadow-dom-using-dynamic-creation\">2. Shadow DOM Using Dynamic Creation <\/a><ul><li><a href=\"#2-1-java-script-code\">2.1 JavaScript Code<\/a><\/li><li><a href=\"#2-2-html-code\">2.2 HTML Code<\/a><\/li><li><a href=\"#2-3-output-on-browser\">2.3 Output on Browser<\/a><\/li><\/ul><\/li><li><a href=\"#3-custom-element-complete-example\">3. Custom Element Complete Example<\/a><ul><li><a href=\"#3-1-dom-inner-elements\">3.1 DOM Inner Elements <\/a><\/li><li><a href=\"#3-2-java-script-code\">3.2 JavaScript Code <\/a><\/li><li><a href=\"#3-3-html-code\">3.3 HTML Code<\/a><\/li><li><a href=\"#3-4-get-value\">3.4 Get Value<\/a><\/li><li><a href=\"#3-5-set-value\">3.5 Set Value<\/a><\/li><\/ul><\/li><li><a href=\"#strong-\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932-strong\">\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-shadow-dom-using-static-creation-inner-html\">1. Shadow DOM Using Static Creation (InnerHTML)<\/h2>\n\n\n\n<p>\u0928\u093f\u092e\u094d\u0928 Example \u092e\u0947 \u092f\u0926\u093f \u0906\u092a \u0915\u094b\u0908 Static HTML \u0915\u093e \u0939\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u092d\u0940 \u0906\u0938\u093e\u0928\u0940 \u0938\u0947 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0906\u092a \u0915\u0947\u0935\u0932 Static \u0926\u0947 \u0938\u0915\u0924\u0947 \u092f\u0926\u093f \u0906\u092a\u0915\u094b \u0915\u094b\u0908 Calculation \u0906\u0926\u093f \u0915\u0930\u0928\u093e \u0939\u0941\u0935\u0947 \u0939\u094b \u0905\u0932\u0917 \u0938\u0947 Logic \u0932\u0917\u093e\u0928\u0947 \u0939\u094b\u0902\u0917\u0947 \u092f\u093e \u092b\u093f\u0930 \u0906\u092a Dynamic DOM Creation \u0915\u093e \u092d\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-1-java-script-code\">1.1 JavaScript Code<\/h3>\n\n\n\n<pre title=\"StaticExample.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"> class MyElement extends HTMLElement {\n\n    constructor()  {\n      super();\n    }\n\n    connectedCallback() {\n  \n      const shadow = this.attachShadow({mode: 'open'}); \n      let Lbl = this.getAttribute(\"labelText\") ; \n\n      shadow.innerHTML = `\n         &lt;div&gt;\n             &lt;div&gt;`+Lbl+`&lt;\/div&gt;\n             &lt;input type=\"text\" \/&gt;\n         &lt;\/div&gt; `;\n\n  }\n}\n\ncustomElements.define(\"custom-element\", MyElement);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-2-html-code\">1.2 HTML Code<\/h3>\n\n\n\n<pre title=\"StaticExample.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;Shadow DOM Using Static Example&lt;\/title&gt;\n        &lt;script src=\"StaticExample.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n\n        &lt;custom-element labelText=\"Name\"&gt;  &lt;\/custom-element&gt;\n        &lt;custom-element labelText=\"City\"&gt;  &lt;\/custom-element&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-3-output\">1.3 Output <\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"187\" height=\"85\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-8.png?resize=187%2C85&#038;ssl=1\" alt=\"\" class=\"wp-image-10239\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-8.png?w=187&amp;ssl=1 187w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-8.png?resize=150%2C68&amp;ssl=1 150w\" sizes=\"auto, (max-width: 187px) 100vw, 187px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-shadow-dom-using-dynamic-creation\">2. Shadow DOM Using Dynamic Creation <\/h2>\n\n\n\n<p>\u0928\u093f\u092e\u094d\u0928 Example \u092e\u0947 \u090f\u0915 Dynamic Division \u092c\u0928\u093e\u0915\u0930 \u0909\u0938\u0947 Shadow \u092e\u0947 \u091c\u094b\u095c\u093e \u0917\u092f\u093e \u0939\u0948\u0902 , \u0906\u092a \u0907\u0938 concept \u0915\u094b \u0938\u092e\u091d \u0915\u0930 \u0907\u0938 Logic \u0915\u094b Implement \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-1-java-script-code\">2.1 JavaScript Code<\/h3>\n\n\n\n<pre title=\"DynamicExample.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">class MyElement extends HTMLElement {\n\n    constructor()  {\n      super();\n    }\n\n    connectedCallback() {\n   \n      let Lbl = this.getAttribute(\"labelText\") ;  \n      let div = document.createElement(\"div\");\n      div.className = \"maindiv\";\n      div.innerHTML = \"Element : \" + Lbl;\n\n      const shadow = this.attachShadow({mode: 'open'}); \n      shadow.appendChild(div);\n\n  }\n}\n\ncustomElements.define(\"custom-element\", MyElement);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-2-html-code\">2.2 HTML Code<\/h3>\n\n\n\n<pre title=\"DynamicExample.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;Shadow DOM Using Dynamic Example&lt;\/title&gt;\n        &lt;script src=\"DynamicExample.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n\n        &lt;custom-element labelText=\"Name\"&gt;  &lt;\/custom-element&gt;\n        &lt;custom-element labelText=\"City\"&gt;  &lt;\/custom-element&gt;\n        \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-3-output-on-browser\">2.3 Output on Browser<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"135\" height=\"46\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-9.png?resize=135%2C46&#038;ssl=1\" alt=\"\" class=\"wp-image-10243\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-custom-element-complete-example\">3. Custom Element Complete Example<\/h2>\n\n\n\n<p>Shadow DOM \u0915\u094b \u0938\u092e\u091d\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e \u090f\u0915 \u091b\u094b\u091f\u093e \u0938\u093e Example \u0932\u0947\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0939\u092e \u090f\u0915 Label \u0914\u0930 \u090f\u0915 input \u0915\u094b \u090f\u0915 \u0938\u093e\u0925  \u090f\u0915 Shadow DOM \u092e\u0947 \u0930\u0916\u0947\u0902\u0917\u0947 \u0964 \u0928\u093f\u092e\u094d\u0928 Image \u0938\u0947 \u0906\u092a \u0926\u0947\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0939\u092e\u0928\u0947 HTML Code \u092e\u0947 Tag \u0938\u0947 \u0938\u094d\u0925\u093e\u0928 \u092a\u0930 Custom-Element \u0932\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 \u0914\u0930 \u091c\u094b \u0909\u0938\u0915\u0947 \u0938\u094d\u0925\u093e\u0928 \u092a\u0930 Display \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u0902 \u0964 \u0935\u0939 \u090f\u0915 Label \u0914\u0930 input \u0939\u0948\u0902 \u0964  <\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"197\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-5.png?resize=640%2C197&#038;ssl=1\" alt=\"\" class=\"wp-image-10162\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-5.png?w=817&amp;ssl=1 817w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-5.png?resize=300%2C93&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-5.png?resize=768%2C237&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/image-5.png?resize=150%2C46&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/Q8HHQEAqXGM\" target=\"_blank\" rel=\"noopener\">Related Video : Create you own Element or Tag using Shadow DOM<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-1-dom-inner-elements\">3.1 DOM Inner Elements <\/h3>\n\n\n\n<p>\u092f\u0939 \u091c\u094b \u0928\u093f\u092e\u094d\u0928 HTML \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 \u0939\u092e Dynamic Creation \u0915\u0930\u0947\u0902\u0917\u0947 \u0964 \u0935\u0948\u0938\u0947 \u0906\u092a innerHTML \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0928\u093f\u092e\u094d\u0928 Code \u0915\u094b \u092d\u0940 \u0932\u093f\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0932\u0947\u0915\u093f\u0928 \u091c\u092c \u0939\u092e value Get \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u0940 \u092f\u093e \u092b\u093f\u0930 Value Set \u0915\u0930\u0928\u093e \u0939\u094b\u0902\u0917\u0940 \u0924\u094b Code \u092e\u0947 \u092c\u0926\u0932\u093e\u0935 \u0915\u0930\u0928\u093e \u0939\u094b\u0902\u0917\u0947\u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div&gt;\n    &lt;div&gt;Label Name&lt;\/div&gt;\n    &lt;input type=\"text\" \/&gt;\n&lt;\/div&gt; <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-2-java-script-code\">3.2 JavaScript Code <\/h3>\n\n\n\n<pre title=\"Custom.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">class MyElement extends HTMLElement {\n     static observedAttributes = ['value'];\n     static G_lbl;\n     static G_input;\n\n     constructor() {\n          super();\n     }\n\n     connectedCallback() {\n\n           let div = document.createElement(\"div\");\n           div.className = \"maindiv\";\n\n           var label = this.getAttribute(\"labelText\");\n\n           let lbl = document.createElement(\"div\");\n           lbl.innerHTML = label;\n           lbl.className = \"label\";\n                \n           let input = document.createElement(\"input\");\n           input.type = \"text\";\n           this.G_input  = input;\n\n           input.addEventListener(\"change\", e =&gt; {\n                      e.preventDefault();\n                      e.stopImmediatePropagation();\n                      this.setAttribute('value', e.target.value);\n           });\n\n           let style = document.createElement(\"style\");\n                  style.textContent = `\n                  .maindiv {\n                    border: 1px solid lightgray;\n                    padding:5px;\n                    margin :5px;\n                    font-size : 20px;\n                  }\n\n                  .label {\n                    padding-right : 10px;\n                    width : 100px;\n                    display:inline-block;\n                  }\n\n                  input {\n                    width :calc(100% - 110px);\n                    font-size : 20px;\n                  }\n                  `\n\n            div.appendChild(lbl);\n            div.appendChild(input);\n            \n            const shadow = this.attachShadow({mode: 'open'}); \n            shadow.appendChild(style);\n            shadow.appendChild(div);\n      }\n\n      attributeChangedCallback(name, oldValue, newValue) {\n                  this.G_input.value = newValue;\n      }\n}\n        \ncustomElements.define(\"custom-element\", MyElement);       \n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-3-html-code\">3.3 HTML Code<\/h3>\n\n\n\n<pre title=\"Custom.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Shadow DOM Using Dynamic Example&lt;\/title&gt;\n      &lt;script src=\"Custom.js\"&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n     &lt;div style=\"width:30%; margin: auto;\"&gt;\n\n        &lt;h1&gt;DOM Shadow&lt;\/h1&gt;\n\n        &lt;Custom-Element id=\"ce1\" labelText=\"Name\"   &gt; &lt;\/Custom-Element&gt;\n        &lt;Custom-Element id=\"ce2\" labelText=\"Address\"&gt; &lt;\/Custom-Element&gt;\n        &lt;Custom-Element id=\"ce3\" labelText=\"City\"   &gt; &lt;\/Custom-Element&gt;\n        &lt;Custom-Element id=\"ce4\" labelText=\"PIN\"    &gt; &lt;\/Custom-Element&gt;\n\n     &lt;\/div&gt;\n\n   &lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-4-get-value\">3.4 Get Value<\/h3>\n\n\n\n<p>value attribute \u0939\u092e\u0928\u0947 custom \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u0907\u0938\u0932\u093f\u090f \u0906\u092a .value \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b Value Return \u0928\u0939\u0940\u0902 \u0939\u094b\u0917\u0940 \u0907\u0938\u0932\u093f\u090f \u0906\u092a\u0915\u094b \u0928\u093f\u092e\u094d\u0928 \u0924\u0930\u0939 \u0938\u0947 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e\u0964 jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u092a\u0930 .attr(&#8216;value&#8217;); \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">document.getElementById(\"ce1\").getAttribute(\"value\");<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-5-set-value\">3.5 Set Value<\/h3>\n\n\n\n<p>value attribute \u0939\u092e\u0928\u0947 custom \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u0907\u0938\u0932\u093f\u090f \u0906\u092a .value \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b Value Set \u0928\u0939\u0940\u0902 \u0939\u094b\u0917\u0940 \u0907\u0938\u0932\u093f\u090f \u0906\u092a\u0915\u094b \u0928\u093f\u092e\u094d\u0928 \u0924\u0930\u0939 \u0938\u0947 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e\u0964 jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u092a\u0930 .attr(&#8216;value&#8217;,&#8217;NewVal&#8217;); \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e \u0964<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">document.getElementById(\"ce1\").setAttribute(\"value\", \"Hello\");<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"strong-\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932-strong\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u091c\u092c \u092d\u0940 \u0939\u092e\u0947 \u0915\u094b\u0908 Custom Dom \u092f\u093e Element \u092c\u0928\u093e\u0928\u093e \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0924\u092c \u0939\u092e shadow DOM \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 Shadow DOM API \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e Code \u0915\u094b Hide \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902, \u0914\u0930 \u092e\u0941\u0916\u094d\u092f Code \u0914\u0930 Shadow Code \u0915\u094b \u0905\u0932\u0917 \u0930\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u092f\u0939 \u0926\u094b\u0928\u094b\u0902 \u0939\u0940 Code \u0906\u092a\u0938 \u092e\u0947 Clash \u092d\u0940 \u0928\u0939\u0940\u0902 \u0939\u094b\u0924\u0947 \u0939\u0948\u0902\u0964 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-10158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/01\/js-shadow-dom.jpg?fit=1200%2C628&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=10158"}],"version-history":[{"count":95,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10158\/revisions"}],"predecessor-version":[{"id":10260,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10158\/revisions\/10260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/10205"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=10158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=10158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=10158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}