प्रॉम्प्ट और दायरा
पेज सर्वर से प्रोडक्ट कार्ड्स को स्ट्रीम करता है। प्रत्येक कार्ड को बिना JavaScript के सार्थक कंटेंट रेंडर करना चाहिए, कंपोनेंट शैलियों को अलग रखना चाहिए, और क्लाइंट बंडल आने पर व्यवहार (behavior) को जोड़ना चाहिए। एक डिक्लेरेटिव शैडो रूट का उपयोग करें, फिर उन ब्राउज़रों के लिए प्रोग्रेसिव एन्हांसमेंट का वर्णन करें जो विशेषता को पार्स नहीं करते हैं और उन कस्टम एलिमेंट्स के लिए जो HTML मौजूद होने के बाद अपग्रेड होते हैं।
मूल कौशल ब्राउज़र रेंडरिंग, कंपोनेंट सीमाएं और हाइड्रेशन की शुद्धता है, इसलिए यह frontend से संबंधित है।
इंटरव्यूअर्स क्या मूल्यांकन करते हैं
पहला, क्या आप जानते हैं कि shadowrootmode="open" या "closed" ले जाने वाले टेम्पलेट को समर्थित होने पर HTML पार्सर द्वारा शैडो रूट में बदल दिया जाता है?
दूसरा, क्या आप समझा सकते हैं कि किसी होस्ट के लिए केवल पहला डिक्लेरेटिव शैडो रूट ही अटैच होता है; बाद वाले टेम्पलेट बने रहते हैं और उनके लिए एक सुविचारित फ़ॉलबैक रणनीति की आवश्यकता होती है?
तीसरा, क्या आप सर्वर HTML और क्लाइंट अपग्रेड में स्लॉट्स, स्टाइल्स, एक्सेसिबिलिटी और फॉर्म व्यवहार को सुरक्षित रख सकते हैं?
चौथा, क्या आप open निरीक्षण को closed एनकैप्सुलेशन से अलग पहचान सकते हैं? Closed मोड shadowRoot संदर्भ को छुपाता है; यह कोई सुरक्षा सीमा नहीं है।
पांचवां, क्या आप हाइड्रेशन या स्ट्रीमिंग के दौरान डबल रेंडरिंग, डुप्लिकेट लिसनर्स और खोए हुए इवेंट्स को रोक सकते हैं?
पहले स्पष्ट करने योग्य प्रश्न
- कौन से ब्राउज़र और सर्वर-रेंडर किए गए रिस्पॉन्स मोड समर्थित हैं?
- क्या होस्ट तुरंत एक कस्टम एलिमेंट बन जाता है, या यह बाद में अपग्रेड हो सकता है?
- कौन से चिल्ड्रन स्लॉटेड हैं, और क्या उपभोक्ताओं को उन्हें
::slottedके साथ स्टाइल करना होगा? - क्या टेस्टिंग और इंटीग्रेशन के लिए open मोड आवश्यक है, या closed मोड एक प्रोडक्ट बाधा (constraint) है?
- क्या पेज नेस्टेड कंपोनेंट्स को स्ट्रीम करता है या एक ही रिस्पॉन्स में पूरा रूट भेजता है?
- जब डिक्लेरेटिव पार्सिंग अनुपलब्ध हो तो फ़ॉलबैक क्या है?
30-सेकंड उत्तर ढांचा
“मैं कंपोनेंट को डिक्लेरेटिव शैडो रूट और सिमेंटिक लाइट-DOM फ़ॉलबैक के साथ सर्वर-रेंडर करूंगा, फिर पहले से पार्स किए गए रूट को दोबारा बनाए बिना कस्टम एलिमेंट अपग्रेड को व्यवहार जोड़ने दूंगा। मैं सार्वजनिक कंटेंट के लिए स्लॉट्स का उपयोग करूंगा, स्टाइल्स को रूट के अंदर रखूंगा, सुरक्षा नियंत्रण के बजाय इंटीग्रेशन निर्णय के रूप में open या closed मोड चुनूंगा, और shadowRootMode की सुविधा का पता लगाऊंगा (feature-detect)। हाइड्रेशन इडेम्पोटेंट (idempotent) है, इवेंट्स डेलिगेट किए जाते हैं या एक बार बाउंड होते हैं, और टेस्ट्स असमर्थित ब्राउज़रों, स्ट्रीमिंग क्रम, स्लॉट्स, एक्सेसिबिलिटी और अपग्रेड टाइमिंग को कवर करते हैं।”
चरण-दर-चरण उत्तर
चरण 1: सिमेंटिक रूट रेंडर करें
सर्वर एक डिक्लेरेटिव टेम्पलेट के साथ एक होस्ट का उत्सर्जन करता है। टेक्स्ट और कंट्रोल्स को सार्थक रखें ताकि JavaScript से पहले रिस्पॉन्स उपयोगी बना रहे। जब टूलिंग या इंटीग्रेशन को निरीक्षण की आवश्यकता हो तो open का उपयोग करें; closed का उपयोग केवल तभी करें जब कंपोनेंट अनुबंध जानबूझकर संदर्भ को छुपाता हो।
<product-card>
<template shadowrootmode="open">
<style>:host { display: block }</style>
<article><slot name="title"></slot><button>Buy</button></article>
</template>
<span slot="title">Keyboard</span>
</product-card>स्लॉट असाइनमेंट सार्वजनिक अनुबंध का हिस्सा है। जब तक आप एक्सेसिबिलिटी सिमेंटिक्स को भी नियंत्रित नहीं करते, तब तक शैडो ट्री और फ़ॉलबैक कंटेंट दोनों के अंदर शीर्षक की नकल न करें।
चरण 2: अपग्रेड अनुबंध को परिभाषित करें
जब कस्टम एलिमेंट क्लास को परिभाषित किया जाता है, तो इसके लाइफ़साइकिल को फिर से attachShadow को कॉल करने के बजाय मौजूदा शैडो रूट का पता लगाना चाहिए। स्थिति (state) को एक बार इनिशियलाइज़ करें, लिसनर्स को एक बार बाइंड करें, और सर्वर द्वारा प्रदान किए गए नोड्स को यथावत छोड़ दें। यदि ब्राउज़र ने कोई रूट नहीं बनाया, तो एलिमेंट टेम्पलेट से एक रूट बना सकता है या एक संगत लाइट-DOM फ़ॉलबैक रेंडर कर सकता है।
चरण 3: फीचर का पता लगाएं और फ़ॉलबैक करें
डिक्लेरेटिव व्यवहार पर निर्भर होने से पहले एक छोटे पार्सर प्रोब या प्रासंगिक टेम्पलेट प्रॉपर्टी के साथ समर्थन की जांच करें। असमर्थित ब्राउज़रों को अभी भी सिमेंटिक लाइट-DOM कंटेंट प्राप्त होना चाहिए; क्लाइंट-साइड अपग्रेड बाद में एक शैडो रूट अटैच कर सकता है, लेकिन ट्रांज़िशन के दौरान कंटेंट को छिपाना नहीं चाहिए।
चरण 4: स्लॉट्स और स्टाइल्स को सुरक्षित रखें
स्लॉट्स लाइट-DOM चिल्ड्रन को शैडो ट्री में प्रोजेक्ट करते हैं। नामित स्लॉट्स, डिफ़ॉल्ट-स्लॉट व्यवहार और ::slotted जैसी स्टाइलिंग सीमाओं को दस्तावेज़ित करें। कंपोनेंट स्टाइल्स को रूट में रखें, और सीमा पार न कर सकने वाले सिलेक्टर्स पर निर्भर होने के बजाय सुविचारित कस्टम प्रॉपर्टीज़ या parts को प्रदर्शित करें।
चरण 5: स्ट्रीमिंग और नेस्टिंग को संभालें
स्ट्रीमिंग नेस्टेड स्लॉटेड चिल्ड्रन से पहले या कस्टम-एलिमेंट परिभाषा से पहले एक होस्ट डिलीवर कर सकती है। पार्सिंग क्रम को एक अपेक्षित स्थिति मानें: जब चिल्ड्रन आएं तो स्लॉट अपडेट होना चाहिए, और स्ट्रीम पूरा होने से पहले या बाद में अपग्रेड सुरक्षित होना चाहिए। होस्ट को दूसरे ट्री से बदलने से बचें।
चरण 6: बिना डुप्लिकेट काम के व्यवहार को हाइड्रेट करें
इवेंट हैंडलर्स को एक बार अटैच करें, अधिमानतः बार-बार आने वाले कार्ड्स के लिए रूट-लेवल डेलिगेट के माध्यम से। इनिशियलाइज़ेशन को एक प्राइवेट फ़ील्ड या वीक मैप में चिह्नित करें, न कि किसी सार्वजनिक विशेषता (attribute) में जिसे उपभोक्ता अधिलेखित (overwrite) कर सकें। व्यवहार संलग्न होने पर फ़ॉर्म स्थिति और फ़ोकस को बनाए रखें।
चरण 7: ब्राउज़र और एक्सेसिबिलिटी सीमाओं का परीक्षण करें
समर्थित और असमर्थित पार्सर्स, open और closed मोड्स, एक बनाम कई डिक्लेरेटिव रूट्स, देर से आने वाले स्लॉट्स, पार्सिंग से पहले और बाद में कस्टम-एलिमेंट अपग्रेड, कीबोर्ड फ़ोकस, लेबल्स, फ़ॉर्म सबमिशन और नेटवर्क रुकावट के बाद हाइड्रेशन का परीक्षण करें। सुनिश्चित करें कि एक इंटरैक्टिव कंट्रोल ट्री हो और कोई डुप्लिकेट इवेंट न हो।
मॉडल उत्तर
“मैं एक सिमेंटिक होस्ट और एक डिक्लेरेटिव शैडो रूट को स्ट्रीम करूंगा, सार्वजनिक कंटेंट के लिए नामित स्लॉट्स का उपयोग करूंगा, और स्टाइल्स को रूट के अंदर रखूंगा। कस्टम-एलिमेंट अपग्रेड पहले जांचता है कि क्या कोई रूट पहले से मौजूद है, ताकि हाइड्रेशन सर्वर मार्कअप को बदलने के बजाय उसे बढ़ाए (enhance करे)। Open मोड निरीक्षण का समर्थन करता है; closed मोड केवल संदर्भ को छुपाता है और यह कोई सुरक्षा सीमा नहीं है।
मैं पार्सर समर्थन का पता लगाऊंगा और लाइट-DOM फ़ॉलबैक कंटेंट को बनाए रखूंगा। स्ट्रीमिंग और देर से अपग्रेड सामान्य स्थितियां हैं, इसलिए स्लॉट प्रोजेक्शन और इनिशियलाइज़ेशन इडेम्पोटेंट होना चाहिए। टेस्ट्स असमर्थित ब्राउज़रों, नेस्टेड रूट्स, देर से आने वाले स्लॉट्स, फ़ोकस, फ़ॉर्म, एक्सेसिबिलिटी और डुप्लिकेट इवेंट रोकथाम को कवर करते हैं।”
सामान्य गलतियाँ
- प्रत्येक अपग्रेड के दौरान
attachShadowको कॉल करना → मौजूदा रूट्स या स्थिति खो जाती है → पार्स किए गए रूट का पुन: उपयोग करें। - Closed मोड को सुरक्षा मानना → कॉलर्स अभी भी प्रदर्शित व्यवहार के माध्यम से इंटरैक्ट कर सकते हैं → इसे केवल एनकैप्सुलेशन के रूप में दस्तावेज़ित करें।
- फ़ॉलबैक और शैडो कंटेंट की नकल करना → स्क्रीन रीडर दो बार घोषणा कर सकते हैं → एक सुलभ स्रोत परिभाषित करें।
- यह मान लेना कि पार्सिंग समाप्त होने से पहले स्लॉट आ जाते हैं → स्ट्रीम किए गए चिल्ड्रन मेंटल मॉडल से गायब हो जाते हैं → देर से प्रोजेक्शन का परीक्षण करें।
- आंतरिक सिलेक्टर्स के साथ स्लॉटेड कंटेंट को स्टाइल करना → नियम सीमा पार नहीं करते हैं →
::slotted, parts, या कस्टम प्रॉपर्टीज़ का उपयोग करें। - प्रत्येक रेंडर पर लिसनर्स को बाइंड करना → क्लिक कई बार ट्रिगर होते हैं → हाइड्रेशन को इडेम्पोटेंट बनाएं।
- लाइट-DOM फ़ॉलबैक छोड़ना → असमर्थित ब्राउज़र खाली कार्ड दिखाते हैं → सिमेंटिक सर्वर मार्कअप बनाए रखें।
फॉलो-अप प्रश्न
फॉलो-अप 1: क्या डिक्लेरेटिव शैडो रूट हमेशा अटैच होता है?
नहीं। यह पार्सर समर्थन और एक मान्य मोड पर निर्भर करता है। एक असमर्थित ब्राउज़र टेम्पलेट को साधारण कंटेंट के रूप में छोड़ देता है, इसलिए फ़ॉलबैक या क्लाइंट अपग्रेड की आवश्यकता होती है।
फॉलो-अप 2: प्रति होस्ट केवल एक ही रूट क्यों?
पार्सर उस होस्ट के लिए पहले डिक्लेरेटिव रूट को अटैच करता है; प्रतिस्पर्धी रूट्स बनाने के बजाय बाद के टेम्पलेट्स जानबूझकर संभालने के लिए उपलब्ध रहते हैं।
फॉलो-अप 3: open मोड कब चुनें?
Open मोड तब चुनें जब टेस्ट्स, इंटीग्रेशन, या नियंत्रित एक्सटेंशन को रूट संदर्भ की आवश्यकता हो। यह सुरक्षा विशेषाधिकार प्रदान या हटाता नहीं है।
फॉलो-अप 4: स्ट्रीमिंग के दौरान स्लॉट्स कैसे काम करते हैं?
होस्ट स्लॉटेड चिल्ड्रन से पहले मौजूद हो सकता है; एक बार चिल्ड्रन आ जाने पर, स्लॉट असाइनमेंट अपडेट हो जाता है। टेस्ट्स में दोनों आगमन क्रम शामिल होने चाहिए।
फॉलो-अप 5: आप हाइड्रेशन बेमेल (mismatch) से कैसे बचते हैं?
सर्वर और क्लाइंट अनुबंधों को स्थिर रखें, मौजूदा नोड्स का पुन: उपयोग करें, और दूसरा ट्री रेंडर करने के बजाय इनिशियलाइज़ेशन को इडेम्पोटेंट बनाएं।
फॉलो-अप 6: आप closed रूट्स का परीक्षण कैसे करते हैं?
सार्वजनिक अनुबंध के माध्यम से उपयोगकर्ता-दृश्यमान व्यवहार, फ़ोकस, इवेंट्स और एक्सेसिबिलिटी का परीक्षण करें; सीधे shadowRoot पढ़ने पर निर्भर न रहें।