HTML5 Course in Roman Hindi/Urdu - Lecture 10: Web Components Basics aur Details/Summary - Fully Detailed
HTML5 Web Components Basics (Custom Elements, Shadow DOM) - Har Concept Ki Full Details
HTML5 Web Components reusable, encapsulated components banane ki facility dete hain, jaise custom tags. Yeh modern web development ka part hai, jahan aap apne tags define kar sakte ho bina global CSS/JS conflict ke. Focus on HTML5 ke core: custom-elements, shadow-dom, aur templates. (Note: Full implementation ke liye JS chahiye, lekin hum HTML structure explain karenge.)
Key Benefit: Components self-contained, easy to reuse across projects.
Custom Elements - Apne Tags Banana
Purpose: Naye HTML tags define karna, jaise <my-button>, jo standard tags jaise behave kare.
HTML Integration: Custom element name hyphen (-) ke saath (autonomous custom element). JS mein customElements.define('tag-name', class).
Attributes: Global attributes support, lifecycle callbacks (connectedCallback etc.).
Kab use karein: UI widgets, jaise custom cards.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Elements Example - Lecture 10</title>
</head>
<body>
<h1>Custom Element Demo</h1>
<my-greeting name="Ali"></my-greeting>
<my-greeting>Default User</my-greeting>
<script>
class MyGreeting extends HTMLElement {
connectedCallback() {
const name = this.getAttribute('name') || 'Guest';
this.innerHTML = `<p>Hello, ${name}!</p>`;
}
}
customElements.define('my-greeting', MyGreeting);
</script>
</body>
</html>Name attribute se personalized greeting banega. JS class HTML tag ko extend karta hai.
Shadow DOM - Encapsulation
Purpose: Internal structure hide karna, global styles se protect. Custom element ke andar shadow root attach.
HTML Integration: JS mein this.attachShadow({mode: 'open/closed'}), andar template insert.
Access: Open mode mein JS access, closed mein nahi. Slots for content projection.
Kab use karein: Components ko isolate karne ke liye.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow DOM Example - Lecture 10</title>
</head>
<body>
<h1>Shadow DOM Demo</h1>
<my-card>
<h2 slot="title">Card Title</h2>
<p slot="content">Card Content</p>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>p { color: blue; }</style>
<div>
<slot name="title"></slot>
<slot name="content">Default Content</slot>
</div>
`;
}
}
customElements.define('my-card', MyCard);
</script>
</body>
</html>Shadow mein styles internal rahenge, slot se content project hoga. Mode 'open' debug ke liye.
HTML Template aur Slot Elements
Purpose: Reusable markup define, cloning ke liye. <template> render nahi hota by default.
Attributes: Id for reference. Slot: name for specific projection.
Kab use karein: Web components ke andar boilerplate.
<template id="my-template">
<li><slot>Default Item</slot></li>
</template>
<script>
const template = document.getElementById('my-template');
const clone = template.content.cloneNode(true);
clone.querySelector('slot').textContent = 'Custom Item';
document.body.appendChild(clone);
</script>Template clone karne se content insert hoga, slot placeholder kaam karega.
Tip: Web Components polyfills old browsers ke liye, lekin modern mein native. ARIA for accessibility.
Details aur Summary Elements - Collapsible Content
Purpose: Accordion-style toggle, jaise FAQs. Native HTML, no JS needed.
Elements: <details> container (open by default attribute se), <summary> clickable header.
Attributes: Open (boolean, initially expanded).
Kab use karein: Help sections, spoilers.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details/Summary Example - Lecture 10</title>
</head>
<body>
<h1>FAQ Section</h1>
<details>
<summary>HTML5 Kya Hai?</summary>
<p>HyperText Markup Language version 5, web structure ke liye.</p>
</details>
<details open>
<summary>CSS Kab Seekhein?</summary>
<p>HTML5 ke baad, styling ke liye.</p>
</details>
<details>
<summary>Advanced: Nested Details</summary>
<p>Yahan andar doosra details.</p>
<details>
<summary>Sub Question</summary>
<p>Sub answer.</p>
</details>
</details>
</body>
</html>Summary click par details toggle hoga, open wala initially expanded. Nested support hai.
Tip: Styling CSS se (details[open] p {color: green;}), accessibility ke liye summary meaningful rakho.
Practice Tasks (Detailed with Steps)
- Custom Elements Practice: "custom-elements.html" banao. Ek custom <my-alert> tag define karo message attribute ke saath. JS class mein innerHTML set karo.
- Shadow DOM Practice: "shadow-dom.html" mein <my-tab> banao shadow ke saath, slot use karo content project ke liye.
- Template Practice: "template-slot.html" mein template define karo list item ke liye, JS se clone aur append karo multiple times.
- Details/Summary Practice: "accordion.html" mein 5 FAQs banao details ke saath, ek open set karo. Nested ek mein add karo.
- Combined: Ek custom component banao web component se (shadow DOM, template), andar details/summary use karo collapsible info ke liye. 40 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Custom elements name rules?
- A: Hyphen zaroori (my-tag), lowercase, valid identifier.
- Q: Shadow DOM closed vs open?
- A: Open JS access allow, closed encapsulate fully (security).
- Q: Template visible kyun nahi?
- A: Design-time, JS clone se render hota hai.
- Q: Details accessibility?
- A: Native ARIA support, summary role="button" jaise behave karta hai.
Next Lecture Teaser
Lecture 11: HTML5 History API (pushState, popState) aur Manifest for PWAs – Navigation control aur app-like web apps.
Yeh lecture complete. Ab aap web components aur collapsible elements master kar chuke ho.
