Shadow DOM
जब भी हमे कोई Custom Dom या Element बनाना होता हैं तब हम shadow DOM का उपयोग करते हैं । Shadow DOM API का उपयोग कर हम Code को Hide कर सकते हैं, और मुख्य Code और Shadow Code को अलग रख सकते हैं। यह दोनों ही Code आपस मे Clash भी नहीं होते हैं। इसका उपयोग करने से Code को साफ सुथरा रखा जा सकता हैं क्युकी Custom Element बना कर हम Repetitive Code को कम कर सकते हैं । Shadow DOM का उपयोग कर हम HTML Structure, Style और Behavior को Main Code से Separate और Hide कर सकते हैं ।
Table of Contents
1. Shadow DOM Using Static Creation (InnerHTML)
निम्न Example मे यदि आप कोई Static HTML का ही उपयोग करना चाहते हैं तो भी आसानी से कर सकते हैं । इसमे आप केवल Static दे सकते यदि आपको कोई Calculation आदि करना हुवे हो अलग से Logic लगाने होंगे या फिर आप Dynamic DOM Creation का भी उपयोग कर सकते हैं।
1.1 JavaScript Code
class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const shadow = this.attachShadow({mode: 'open'});
let Lbl = this.getAttribute("labelText") ;
shadow.innerHTML = `
<div>
<div>`+Lbl+`</div>
<input type="text" />
</div> `;
}
}
customElements.define("custom-element", MyElement);1.2 HTML Code
<html>
<head>
<title>Shadow DOM Using Static Example</title>
<script src="StaticExample.js"></script>
</head>
<body>
<custom-element labelText="Name"> </custom-element>
<custom-element labelText="City"> </custom-element>
</body>
</html>1.3 Output
2. Shadow DOM Using Dynamic Creation
निम्न Example मे एक Dynamic Division बनाकर उसे Shadow मे जोड़ा गया हैं , आप इस concept को समझ कर इस Logic को Implement कर सकते हैं ।
2.1 JavaScript Code
class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
let Lbl = this.getAttribute("labelText") ;
let div = document.createElement("div");
div.className = "maindiv";
div.innerHTML = "Element : " + Lbl;
const shadow = this.attachShadow({mode: 'open'});
shadow.appendChild(div);
}
}
customElements.define("custom-element", MyElement);2.2 HTML Code
<html>
<head>
<title>Shadow DOM Using Dynamic Example</title>
<script src="DynamicExample.js"></script>
</head>
<body>
<custom-element labelText="Name"> </custom-element>
<custom-element labelText="City"> </custom-element>
</body>
</html>2.3 Output on Browser
3. Custom Element Complete Example
Shadow DOM को समझने के लिए हम एक छोटा सा Example लेते हैं । इसमे हम एक Label और एक input को एक साथ एक Shadow DOM मे रखेंगे । निम्न Image से आप देख सकते हैं हमने HTML Code मे Tag से स्थान पर Custom-Element लिया हैं । और जो उसके स्थान पर Display हो रहा हैं । वह एक Label और input हैं ।
Related Video : Create you own Element or Tag using Shadow DOM
3.1 DOM Inner Elements
यह जो निम्न HTML हैं इसमे हम Dynamic Creation करेंगे । वैसे आप innerHTML का उपयोग कर निम्न Code को भी लिख सकते हैं लेकिन जब हम value Get करना होगी या फिर Value Set करना होंगी तो Code मे बदलाव करना होंगे।
<div>
<div>Label Name</div>
<input type="text" />
</div> 3.2 JavaScript Code
class MyElement extends HTMLElement {
static observedAttributes = ['value'];
static G_lbl;
static G_input;
constructor() {
super();
}
connectedCallback() {
let div = document.createElement("div");
div.className = "maindiv";
var label = this.getAttribute("labelText");
let lbl = document.createElement("div");
lbl.innerHTML = label;
lbl.className = "label";
let input = document.createElement("input");
input.type = "text";
this.G_input = input;
input.addEventListener("change", e => {
e.preventDefault();
e.stopImmediatePropagation();
this.setAttribute('value', e.target.value);
});
let style = document.createElement("style");
style.textContent = `
.maindiv {
border: 1px solid lightgray;
padding:5px;
margin :5px;
font-size : 20px;
}
.label {
padding-right : 10px;
width : 100px;
display:inline-block;
}
input {
width :calc(100% - 110px);
font-size : 20px;
}
`
div.appendChild(lbl);
div.appendChild(input);
const shadow = this.attachShadow({mode: 'open'});
shadow.appendChild(style);
shadow.appendChild(div);
}
attributeChangedCallback(name, oldValue, newValue) {
this.G_input.value = newValue;
}
}
customElements.define("custom-element", MyElement);
3.3 HTML Code
<html>
<head>
<title>Shadow DOM Using Dynamic Example</title>
<script src="Custom.js"></script>
</head>
<body>
<div style="width:30%; margin: auto;">
<h1>DOM Shadow</h1>
<Custom-Element id="ce1" labelText="Name" > </Custom-Element>
<Custom-Element id="ce2" labelText="Address"> </Custom-Element>
<Custom-Element id="ce3" labelText="City" > </Custom-Element>
<Custom-Element id="ce4" labelText="PIN" > </Custom-Element>
</div>
</body>
</html>3.4 Get Value
value attribute हमने custom बनाया हैं इसलिए आप .value का उपयोग करेंगे तो Value Return नहीं होगी इसलिए आपको निम्न तरह से उपयोग करना होगा। jQuery का उपयोग करने पर .attr(‘value’); का उपयोग करना होगा ।
document.getElementById("ce1").getAttribute("value");3.5 Set Value
value attribute हमने custom बनाया हैं इसलिए आप .value का उपयोग करेंगे तो Value Set नहीं होगी इसलिए आपको निम्न तरह से उपयोग करना होगा। jQuery का उपयोग करने पर .attr(‘value’,’NewVal’); का उपयोग करना होगा ।
document.getElementById("ce1").setAttribute("value", "Hello");हमारे अन्य आर्टिकल
- MySQL Function
- MySQL Stored Procedure
- PHP Get /Post Method के बारे में जाने
- PHP Math Function के बारे में जाने
- C से C ++ सीखे सरल शब्दों में
- PHP Variable के बारे में जाने
- Arduino Control Structure
- Union in C
- Declaration of Pointer in C
- jQuery Search Filter
- MySQL Create Table | Alter Table | Drop Table
- API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
- CPANEL In Hindi
