𝗧𝗵𝗶𝘀 𝗜𝘀 𝗔 𝗚𝗨𝗜𝗗𝗘 𝗧𝗼 𝗕𝗨𝗜𝗟𝗗𝗜𝗡𝗚 𝗔𝗖𝗖𝗘𝗦𝗦𝗜𝗕𝗟𝗘 𝗪𝗘𝗕 𝗖𝗢𝗠𝗣𝗢𝗡𝗘𝗡𝗧𝗦 आप ऐसे वेब कंपोनेंट्स बनाना चाहते हैं जो अच्छी तरह काम करें और सुलभ (accessible) हों। इसे करने में आपकी मदद करने के लिए यहाँ एक गाइड दी गई है।
- एक पुन: प्रयोज्य (reusable) वेब कंपोनेंट बनाएं जो एक साफ API प्रदान करता हो।
- ARIA attributes और कीबोर्ड सपोर्ट के साथ सुलभता (accessibility) सुनिश्चित करें।
- Shadow DOM और लेज़ी रेंडरिंग (lazy rendering) के साथ परफॉरमेंस को ऑप्टिमाइज़ करें।
- किसी फ्रेमवर्क पर निर्भर रहे बिना थीमिंग और रिस्पॉन्सिवनेस प्रदान करें।
- स्थानीय रूप से चलाने के लिए टेस्ट और एक छोटा बिल्ड सेटअप शामिल करें।
मुख्य परिणाम:
- एक ड्रॉप-इन प्रोफाइल-कार्ड वेब कंपोनेंट जिसे आप कई ऐप्स में इस्तेमाल कर सकते हैं।
- कंपोनेंट लॉजिक, स्टाइलिंग और डेटा के बीच स्पष्ट अलगाव।
- अतिरिक्त स्लॉट्स (slots), प्रॉप्स (props) या माइक्रो-इंटरैक्शन के साथ कंपोनेंट को विस्तारित करने के लिए एक गाइड।
आप इस कंपोनेंट का उपयोग अपने HTML में इस तरह कर सकते हैं:
<profile-card id="pc" name="Alex" title="Engineer">
<span slot="bio">Custom bio here.</span>
<span slot="social">Twitter: @alex</span>
</profile-card>
यह कंपोनेंट स्टाइल को एनकैप्सुलेट करने और लीकेज को रोकने के लिए Shadow DOM का उपयोग करता है। यह थीमिंग के लिए CSS वेरिएबल्स और सुलभता के लिए ARIA attributes का भी उपयोग करता है।