M

MLOG

ಕನ್ನಡ

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ, ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಎಲಿಮೆಂಟ್ಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅವುಗಳ ಪ್ರಯೋಜನಗಳು, ಬಳಕೆ, ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್: ಆಧುನಿಕ ವೆಬ್‌ಗಾಗಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಎಲಿಮೆಂಟ್ಸ್‌ಗಳನ್ನು ರಚಿಸುವುದು

ಇಂದಿನ ವೇಗವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ಮಾಡ್ಯುಲರ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್ ರಚಿಸುವುದು ಅತ್ಯಗತ್ಯ. ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಅದನ್ನೇ ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತವೆ: ಕಸ್ಟಮ್, ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟೆಡ್, ಮತ್ತು ಇಂಟರ್‌ಆಪರೇಬಲ್ UI ಎಲಿಮೆಂಟ್ಸ್‌ಗಳನ್ನು ವಿವಿಧ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದು. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ನ ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಅವುಗಳ ಪ್ರಯೋಜನಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ, ಮತ್ತು ನಿಮಗೆ ಪ್ರಾರಂಭಿಸಲು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೀಡುತ್ತದೆ.

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಎಂದರೇನು?

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಎನ್ನುವುದು ವೆಬ್ ಮಾನದಂಡಗಳ ಒಂದು ಗುಂಪಾಗಿದ್ದು, ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟೆಡ್ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ನಡವಳಿಕೆಯೊಂದಿಗೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಸ್ಟಮ್ HTML ಎಲಿಮೆಂಟ್ಸ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಅವು ಮೂಲಭೂತವಾಗಿ HTMLನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ವಿಸ್ತರಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ, ಯಾವುದೇ ಇತರ ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ಎಲಿಮೆಂಟ್‌ನಂತೆ ಪರಿಗಣಿಸಬಹುದಾದ ಕಸ್ಟಮ್ ಟ್ಯಾಗ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತವೆ.

ವೆಬ್‌ಗಾಗಿ ಲೆಗೋ ಇಟ್ಟಿಗೆಗಳೆಂದು ಅವುಗಳನ್ನು ಯೋಚಿಸಿ. ಪ್ರತಿಯೊಂದು ಇಟ್ಟಿಗೆ (ವೆಬ್ ಕಾಂಪೊನೆಂಟ್) ಒಂದು ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು ನೀವು ಈ ಇಟ್ಟಿಗೆಗಳನ್ನು ಸಂಯೋಜಿಸಿ ಸಂಕೀರ್ಣ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ನ ಸೌಂದರ್ಯವು ಅವುಗಳ ಮರುಬಳಕೆ ಮತ್ತು ಪ್ರತ್ಯೇಕತೆಯಲ್ಲಿದೆ; ಅವುಗಳನ್ನು ಯಾವುದೇ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಬಳಸಬಹುದು, ಬಳಸುತ್ತಿರುವ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ (ಅಥವಾ ಫ್ರೇಮ್‌ವರ್ಕ್ ಇಲ್ಲದೆಯೂ ಸಹ), ಮತ್ತು ಅವುಗಳ ಆಂತರಿಕ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ನಡವಳಿಕೆಯು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಉಳಿದ ಭಾಗಗಳೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪ ಮಾಡುವುದಿಲ್ಲ.

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ನ ಪ್ರಮುಖ ತಂತ್ರಜ್ಞಾನಗಳು

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ನಾಲ್ಕು ಪ್ರಮುಖ ತಂತ್ರಜ್ಞಾನಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿವೆ:

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು

ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

ಒಂದು ಸರಳ ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ಕೌಂಟರ್ ಎಲಿಮೆಂಟ್ ರಚಿಸುವುದು

ಒಂದು ಮೂಲಭೂತ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಯನ್ನು ವಿವರಿಸೋಣ: ಒಂದು ಕಸ್ಟಮ್ ಕೌಂಟರ್ ಎಲಿಮೆಂಟ್.

1. ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ ಕ್ಲಾಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ

ಮೊದಲಿಗೆ, ನಾವು `HTMLElement` ಕ್ಲಾಸ್ ಅನ್ನು ವಿಸ್ತರಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲಾಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ.

class MyCounter extends HTMLElement {
 constructor() {
 super();
 // ಎಲಿಮೆಂಟ್‌ಗೆ ಶ್ಯಾಡೋ ಡಾಮ್ ಅನ್ನು ಲಗತ್ತಿಸಿ.
 this.attachShadow({ mode: 'open' });

 // ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಿ.
 this._count = 0;

 // ಬಟನ್ ಎಲಿಮೆಂಟ್ ರಚಿಸಿ.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 // ಎಣಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸ್ಪ್ಯಾನ್ ಎಲಿಮೆಂಟ್ ರಚಿಸಿ.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // ಇಂಕ್ರಿಮೆಂಟ್ ವಿಧಾನವನ್ನು ಬಟನ್ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗೆ ಬೈಂಡ್ ಮಾಡಿ.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Count: ${this._count}`;
 }

 connectedCallback() {
 console.log('ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ DOM ಗೆ ಸಂಪರ್ಕಗೊಂಡಿದೆ.');
 }

 disconnectedCallback() {
 console.log('ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ DOM ನಿಂದ ಸಂಪರ್ಕ ಕಡಿತಗೊಂಡಿದೆ.');
 }

 adoptedCallback() {
 console.log('ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ ಹೊಸ ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಸ್ಥಳಾಂತರಿಸಲಾಗಿದೆ.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`ಗುಣಲಕ್ಷಣ ${name} ಅನ್ನು ${oldValue} ನಿಂದ ${newValue} ಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

2. ಶ್ಯಾಡೋ ಡಾಮ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ

`attachShadow({ mode: 'open' })` ಸಾಲು ಎಲಿಮೆಂಟ್‌ಗೆ ಶ್ಯಾಡೋ ಡಾಮ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. `mode: 'open'` ಆಯ್ಕೆಯು ಹೊರಗಿನಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಶ್ಯಾಡೋ ಡಾಮ್ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ `mode: 'closed'` ಬಾಹ್ಯ ಪ್ರವೇಶವನ್ನು ತಡೆಯುತ್ತದೆ.

3. ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ನೋಂದಾಯಿಸಿ

ಮುಂದೆ, ನಾವು `customElements.define()` ವಿಧಾನವನ್ನು ಬಳಸಿ ಬ್ರೌಸರ್‌ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ನೋಂದಾಯಿಸುತ್ತೇವೆ.

customElements.define('my-counter', MyCounter);

4. HTML ನಲ್ಲಿ ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಳಸುವುದು

ಈಗ ನೀವು ನಿಮ್ಮ HTML ನಲ್ಲಿ `` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಯಾವುದೇ ಇತರ HTML ಎಲಿಮೆಂಟ್‌ನಂತೆ ಬಳಸಬಹುದು.

<my-counter></my-counter>

ಈ ಕೋಡ್ "Increment" ಎಂದು ಲೇಬಲ್ ಮಾಡಲಾದ ಬಟನ್ ಮತ್ತು ಪ್ರಸ್ತುತ ಎಣಿಕೆಯನ್ನು (0 ರಿಂದ ಪ್ರಾರಂಭಿಸಿ) ಪ್ರದರ್ಶಿಸುವ ಸ್ಪ್ಯಾನ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಕೌಂಟರ್ ಹೆಚ್ಚಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶನವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.

ಆಳವಾಗಿ ಇಳಿಯುವುದು: ಶ್ಯಾಡೋ ಡಾಮ್ ಮತ್ತು ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಶನ್

ಶ್ಯಾಡೋ ಡಾಮ್ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ನ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಪ್ರತ್ಯೇಕ DOM ಟ್ರೀಯನ್ನು ರಚಿಸುವ ಮೂಲಕ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಶನ್ ಒದಗಿಸುತ್ತದೆ, ಅದರ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಪುಟದ ಉಳಿದ ಭಾಗಗಳಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಇದು ಸ್ಟೈಲ್ ಸಂಘರ್ಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸುತ್ತಮುತ್ತಲಿನ ಪರಿಸರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಕಾಂಪೊನೆಂಟ್ ನಿರೀಕ್ಷಿತವಾಗಿ ವರ್ತಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಶ್ಯಾಡೋ ಡಾಮ್ ಒಳಗೆ, ನೀವು ಕಾಂಪೊನೆಂಟ್‌ನ ಆಂತರಿಕ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯವಾಗುವ CSS ಸ್ಟೈಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಇದು ಬಾಹ್ಯ CSS ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಅವಲಂಬಿಸದ ಸ್ವಯಂ-ಒಳಗೊಂಡಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಶ್ಯಾಡೋ ಡಾಮ್ ಸ್ಟೈಲಿಂಗ್

constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 // ಶ್ಯಾಡೋ ಡಾಮ್‌ಗಾಗಿ ಸ್ಟೈಲ್ ಎಲಿಮೆಂಟ್ ರಚಿಸಿ
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಿ.
 this._count = 0;

 // ಬಟನ್ ಎಲಿಮೆಂಟ್ ರಚಿಸಿ.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 // ಎಣಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸ್ಪ್ಯಾನ್ ಎಲಿಮೆಂಟ್ ರಚಿಸಿ.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // ಇಂಕ್ರಿಮೆಂಟ್ ವಿಧಾನವನ್ನು ಬಟನ್ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗೆ ಬೈಂಡ್ ಮಾಡಿ.
 this.button.addEventListener('click', this.increment.bind(this));
 }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `style` ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ CSS ಸ್ಟೈಲ್‌ಗಳು `my-counter` ಕಾಂಪೊನೆಂಟ್‌ನ ಶ್ಯಾಡೋ ಡಾಮ್‌ನಲ್ಲಿರುವ ಬಟನ್ ಮತ್ತು ಸ್ಪ್ಯಾನ್ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತವೆ. ಈ ಸ್ಟೈಲ್‌ಗಳು ಪುಟದಲ್ಲಿರುವ ಯಾವುದೇ ಇತರ ಬಟನ್‌ಗಳು ಅಥವಾ ಸ್ಪ್ಯಾನ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

HTML ಟೆಂಪ್ಲೇಟ್‌ಗಳು: ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ರಚನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

HTML ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ HTML ರಚನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇವುಗಳನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ DOM ಗೆ ಸೇರಿಸಬಹುದು. ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿವೆ.

ಉದಾಹರಣೆ: HTML ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ಬಳಸುವುದು

<template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Increment</button>
 <span>Count: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು `counter-template` ಐಡಿಯೊಂದಿಗೆ HTML ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಟೆಂಪ್ಲೇಟ್ ನಮ್ಮ ಕೌಂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ HTML ರಚನೆ ಮತ್ತು CSS ಸ್ಟೈಲ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. `MyCounter` ಕ್ಲಾಸ್‌ನೊಳಗೆ, ನಾವು ಟೆಂಪ್ಲೇಟ್ ವಿಷಯವನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ ಶ್ಯಾಡೋ ಡಾಮ್‌ಗೆ ಸೇರಿಸುತ್ತೇವೆ. ಇದು `my-counter` ಕಾಂಪೊನೆಂಟ್‌ನ ಪ್ರತಿ ಇನ್‌ಸ್ಟಾನ್ಸ್‌ಗೆ ಟೆಂಪ್ಲೇಟ್ ರಚನೆಯನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಪ್ರಾಪರ್ಟೀಸ್

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಗುಣಲಕ್ಷಣಗಳು (attributes) ಮತ್ತು ಪ್ರಾಪರ್ಟೀಸ್ (properties) ಎರಡನ್ನೂ ಹೊಂದಿರಬಹುದು. ಗುಣಲಕ್ಷಣಗಳನ್ನು HTML ಮಾರ್ಕಪ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲಾಸ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಪ್ರಾಪರ್ಟೀಸ್‌ನಲ್ಲಿ ಪ್ರತಿಫಲಿಸಬಹುದು, ಮತ್ತು ಪ್ರತಿಯಾಗಿ.

ಉದಾಹರಣೆ: ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು

class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Hello, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

<my-greeting name="World"></my-greeting>
<my-greeting name="Alice"></my-greeting>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು `my-greeting` ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ `name` ಗುಣಲಕ್ಷಣವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. `observedAttributes` ಗೆಟರ್ ಬ್ರೌಸರ್‌ಗೆ ಯಾವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬೇಕೆಂದು ಹೇಳುತ್ತದೆ. `name` ಗುಣಲಕ್ಷಣ ಬದಲಾದಾಗ, `attributeChangedCallback` ವಿಧಾನವನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ, ಮತ್ತು ನಾವು `span` ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವನ್ನು ಹೊಸ ಹೆಸರಿನೊಂದಿಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತೇವೆ.

ಜೀವನಚಕ್ರದ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಹಲವಾರು ಜೀವನಚಕ್ರದ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದು, ಕಾಂಪೊನೆಂಟ್‌ನ ಜೀವನಚಕ್ರದ ವಿವಿಧ ಹಂತಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ:

ಈ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಕಾಂಪೊನೆಂಟ್‌ನ ಜೀವನಚಕ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಪ್ರಾರಂಭ, ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಇತರ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅವಕಾಶಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಬೆಂಬಲಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅಗತ್ಯವಾದ ಕಾರ್ಯವನ್ನು ಒದಗಿಸಲು ಪಾಲಿಫಿಲ್‌ಗಳು ಬೇಕಾಗಬಹುದು. `webcomponents.js` ಪಾಲಿಫಿಲ್ ಲೈಬ್ರರಿಯು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗೆ ಸಮಗ್ರ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪಾಲಿಫಿಲ್ ಅನ್ನು ಸೇರಿಸಲು, ಕೆಳಗಿನ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್ ಬಳಸಿ:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>

ಸಾಮಾನ್ಯವಾಗಿ ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ವಿಧಾನವನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ, ಬ್ರೌಸರ್ ಸ್ಥಳೀಯವಾಗಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ ಮಾತ್ರ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವುದು.

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಾಂಪೊನೆಂಟ್ ಸಂಯೋಜನೆ

ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ UI ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಇದು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ನಿರ್ವಹಣೆ

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಕಳುಹಿಸಬಹುದು ಮತ್ತು ಆಲಿಸಬಹುದು. ಇದು ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಪರಸ್ಪರ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ಉಳಿದ ಭಾಗಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಡೇಟಾ ಬೈಂಡಿಂಗ್

ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಅಂತರ್ನಿರ್ಮಿತ ಡೇಟಾ ಬೈಂಡಿಂಗ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಒದಗಿಸದಿದ್ದರೂ, ನೀವು ಕಸ್ಟಮ್ ಕೋಡ್ ಬಳಸಿ ಅಥವಾ ಡೇಟಾ ಬೈಂಡಿಂಗ್ ಲೈಬ್ರರಿಯೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ ಡೇಟಾ ಬೈಂಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

ಪ್ರವೇಶಸಾಧ್ಯತೆ

ನಿಮ್ಮ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳು ಅಂಗವಿಕಲರು ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯವೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ.

ನೈಜ ಜಗತ್ತಿನಲ್ಲಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್: ಅಂತರರಾಷ್ಟ್ರೀಯ ಉದಾಹರಣೆಗಳು

ಆಧುನಿಕ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಕಂಪನಿಗಳು ಮತ್ತು ಸಂಸ್ಥೆಗಳು ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿವೆ. ಇಲ್ಲಿ ಕೆಲವು ಉದಾಹರಣೆಗಳಿವೆ:

ಇವುಗಳು ನೈಜ ಜಗತ್ತಿನಲ್ಲಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುತ್ತಿದೆ ಎಂಬುದಕ್ಕೆ ಕೆಲವೇ ಉದಾಹರಣೆಗಳಾಗಿವೆ. ಮಾಡ್ಯುಲರ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅದರ ಪ್ರಯೋಜನಗಳನ್ನು ಡೆವಲಪರ್‌ಗಳು ಗುರುತಿಸುತ್ತಿದ್ದಂತೆ ಈ ತಂತ್ರಜ್ಞಾನವು ಹೆಚ್ಚುತ್ತಿರುವ ಅಳವಡಿಕೆಯನ್ನು ಪಡೆಯುತ್ತಿದೆ.

ತೀರ್ಮಾನ

ಆಧುನಿಕ ವೆಬ್‌ಗಾಗಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಒಂದು ಶಕ್ತಿಯುತ ವಿಧಾನವನ್ನು ನೀಡುತ್ತವೆ. ಕಸ್ಟಮ್ ಎಲಿಮೆಂಟ್ಸ್, ಶ್ಯಾಡೋ ಡಾಮ್, ಮತ್ತು HTML ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ವಿವಿಧ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದಾದ ಸ್ವಯಂ-ಒಳಗೊಂಡಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ವೆಬ್ ಮಾನದಂಡಗಳು ವಿಕಸನಗೊಂಡಂತೆ, ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಭವಿಷ್ಯವನ್ನು ರೂಪಿಸುವಲ್ಲಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಪ್ರಮುಖ ಪಾತ್ರವನ್ನು ವಹಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತವೆ.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

ಇಂದೇ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಎಲಿಮೆಂಟ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!