फ्रंटएंड इंटरव्यू: कंपोनेंट सीमाओं के लिए आप CSS @scope का उपयोग कैसे करते हैं?

1. प्रश्न और संदर्भ

एक सर्वर-रेंडर्ड एडमिन पेज में जेनेरिक .title और .button क्लासेस का उपयोग करने वाले कई कंपोनेंट्स हैं। एक नया मार्केटिंग कार्ड पुराने पेजों पर बटन स्पेसिंग और हेडिंग के रंगों को बदल देता है। सर्वर-रेंडर्ड फर्स्ट पेंट, थीम वेरिएबल्स और पुराने ब्राउज़र सपोर्ट को बनाए रखते हुए @scope के साथ एक क्रमिक माइग्रेशन डिज़ाइन करें। कंपोनेंट्स एक ही डॉक्यूमेंट DOM में रहते हैं और Shadow DOM का उपयोग नहीं करते हैं।

2. इंटरव्यूअर क्या मूल्यांकन करता है

• यह समझना कि @scope सिलेक्टर मैचिंग को सीमित करता है लेकिन Shadow DOM आइसोलेशन नहीं बनाता है।
• सिंटैक्स को याद रखने के बजाय स्कोपिंग रूट्स, वैकल्पिक स्कोप लिमिट्स, नेस्टेड स्कोप्स और कैस्केड क्रम को समझाना।
• कंपोनेंट स्टेट, थीम वेरिएबल्स, ग्लोबल रीसेट्स और थर्ड-पार्टी स्टाइल्स को अलग करना।
• कैपेबिलिटी डिटेक्शन, फॉलबैक व्यवहार, विजुअल रिग्रेशन और माइग्रेशन मेट्रिक्स को डिज़ाइन करना।

3. पहले स्पष्ट करने योग्य प्रश्न

1. किन ब्राउज़रों को काम करना चाहिए, और क्या एक असमर्थित ब्राउज़र को पिक्सेल-सटीक होना चाहिए या लीगेसी CSS पाथ का उपयोग करना चाहिए?
2. क्या कंपोनेंट्स DOM शेयर करते हैं और थीम वेरिएबल्स इनहेरिट करते हैं, या उन्हें वास्तविक DOM और इवेंट आइसोलेशन की आवश्यकता है?
3. क्या स्टाइल्स पेज, कंपोनेंट या थर्ड-पार्टी पैकेज द्वारा लोड की जाती हैं, और पुराने और नए नियम कब तक सह-अस्तित्व में रहेंगे?
4. क्या स्कोप को रूट के सभी डिसेंडेंट्स को कवर करना चाहिए, या किसी नेस्टेड सबट्री पर रुकना चाहिए?

4. 30-सेकंड का उत्तर

मैं @scope को सिलेक्टर-रेंज कंट्रोल के रूप में मानूँगा, Shadow DOM के रूप में नहीं। प्रत्येक कंपोनेंट को एक स्थिर रूट क्लास दें और उसके नियमों को उस स्कोप के अंदर रखें; जब मैचिंग को नेस्टेड बाउंड्री पर रुकना हो तो to का उपयोग करें। थीम वेरिएबल्स को स्पष्ट पेज या कंपोनेंट रूट पर रखें और स्टेट को लोकल क्लासेस या एट्रिब्यूट्स के साथ व्यक्त करें। समर्थित ब्राउज़र स्कोप्ड नियमों का उपयोग करते हैं; असमर्थित ब्राउज़र उन्हीं सिमेंटिक नियमों से बने नेमस्पेस्ड बिल्ड का उपयोग करते हैं। कैस्केड लेयर्स, विजुअल रिग्रेशन और रूल-हिट मेट्रिक्स के साथ एक समय में एक कंपोनेंट को माइग्रेट करें ताकि पुराने और नए सिलेक्टर्स चुपचाप आपस में न टकराएं।

5. स्टेप-बाय-स्टेप उत्तर

स्टेप 1: आइसोलेशन लक्ष्य को अलग करें

निर्धारित करें कि समस्या सिलेक्टर टकराव, इनहेरिटेंस प्रदूषण, या DOM/इवेंट सुरक्षा सीमा है। @scope उसी डॉक्यूमेंट नोड्स पर वेरिएबल इनहेरिटेंस और स्क्रिप्ट एक्सेस की अनुमति देते हुए सिलेक्टर रीच को संबोधित करता है। जब DOM, स्टाइल्स और इवेंट्स को अलग करना हो तो Shadow DOM चुनें; जब बिल्ड-टाइम मॉड्यूलर क्लास नेम्स मुख्य लक्ष्य हों तो CSS Modules चुनें।

स्टेप 2: स्कोप रूट और लिमिट को परिभाषित करें

कंपोनेंट रूट को स्कोप रूट के रूप में उपयोग करें और आंतरिक सिलेक्टर्स को पठनीय रखें:

@scope (.profile-card) {
  .title { color: var(--card-title); }
  .button { padding-inline: 0.75rem; }
}

.profile-card के अंदर एक नेस्टेड थर्ड-पार्टी एडिटर को बाहर करने के लिए, @scope (.profile-card) to (.editor) { ... } का उपयोग करें। लिमिट केवल यह बताती है कि मैचिंग कहाँ रुकती है; यह नोड्स को क्लोन नहीं करती है या कस्टम-प्रॉपर्टी इनहेरिटेंस को ब्लॉक नहीं करती है। नेस्टेड स्कोप्स के लिए रूट्स और लिमिट्स को डॉक्यूमेंट करें ताकि एक एलिमेंट गलती से कई कंपोनेंट्स के स्वामित्व में न आ जाए।

स्टेप 3: कैस्केड, स्टेट और थीम्स को संभालें

स्कोपिंग कैस्केड की जगह नहीं लेती है। रीसेट्स, कंपोनेंट डिफॉल्ट्स और ओवरराइड्स को स्पष्ट @layer में रखें; जब सिलेक्टर स्पेसिफिसिटी बढ़ाने के बजाय किसी नियम को ओवरराइड करना आसान रखना हो तो :where() का उपयोग करें। कंपोनेंट रूट पर [data-state] या लोकल क्लासेस के साथ स्टेट व्यक्त करें और उन नियमों को एक परिभाषित लेयर को सौंपें। थीम वेरिएबल्स पेज रूट से आ सकते हैं या कंपोनेंट रूट पर ओवरराइड किए जा सकते हैं, लेकिन आंतरिक वेरिएबल्स को गलती से ग्लोबल कॉन्ट्रैक्ट नहीं बनना चाहिए।

स्टेप 4: कम्पैटिबिलिटी और माइग्रेशन डिज़ाइन करें

पाथ चुनने के लिए @supports selector(:scope) या ब्राउज़र-टारगेट मैट्रिक्स का उपयोग करें, फिर वास्तविक टारगेट ब्राउज़रों को सत्यापित करें। एक लीगेसी बिल्ड उन्हीं नियमों को .profile-card .title जैसे नेमस्पेस्ड सिलेक्टर्स में विस्तारित कर सकता है; दोनों पाथ एक ही सोर्स रूल सेट से आने चाहिए। कंपोनेंट-दर-कंपोनेंट माइग्रेट करें, पुराने और नए नियम सह-अस्तित्व में रहने के दौरान स्क्रीनशॉट की तुलना करें, और नए पाथ के ऑब्जर्वेबल होने के बाद ही पुराने ग्लोबल सिलेक्टर को हटाएं। पूरे एप्लिकेशन को एक विशाल स्कोप में न लपेटें।

स्टेप 5: सीमाओं और रोलबैक को सत्यापित करें

नेस्टेड कंपोनेंट्स में समान नाम वाले क्लासेस, स्कोप रूट, to सीमा के बाहर के एलिमेंट्स, थीम परिवर्तन, कंबाइंड स्टेट्स, डायनेमिक रूप से इंसर्ट किए गए नोड्स और थर्ड-पार्टी सबट्रीज़ का परीक्षण करें। बिल्ड आउटपुट में स्कोप्ड-रूल कवरेज, ब्राउज़र कैपेबिलिटी डिस्ट्रीब्यूशन, विजुअल डिफ्स और अनमैच्ड नियमों को ट्रैक करें। यदि रिग्रेशन बढ़ते हैं, तो कंपोनेंट को रोलबैक करें या एन्हांस्ड पाथ को अक्षम करें; अधिक स्पेसिफिसिटी जोड़कर बाउंड्री एरर को न छिपाएं।

6. मॉडल उत्तर

मैं पहले तय करूँगा कि हमें सिलेक्टर सीमाओं की आवश्यकता है या पूर्ण DOM आइसोलेशन की। शेयर्ड डॉक्यूमेंट DOM के लिए, @scope (.profile-card) आंतरिक सिलेक्टर्स को लोकल रखता है और to एक नेस्टेड एडिटर पर मैचिंग को रोक सकता है; यह Shadow DOM की तरह इवेंट्स को आइसोलेट नहीं करता है या कस्टम-प्रॉपर्टी इनहेरिटेंस को नहीं रोकता है। मैं रीसेट, डिफॉल्ट्स और स्टेट ओवरराइड्स को स्पष्ट कैस्केड लेयर्स में रखूँगा और थीम वेरिएबल्स को केवल पेज या कंपोनेंट रूट्स पर परिभाषित करूँगा। असमर्थित ब्राउज़र उन्हीं नियमों से बने नेमस्पेस्ड बिल्ड का उपयोग करेंगे। माइग्रेशन स्क्रीनशॉट डिफ्स, कैपेबिलिटी डिस्ट्रीब्यूशन और अनमैच्ड-रूल मेट्रिक्स के साथ कंपोनेंट-दर-कंपोनेंट होगा। एक बाउंड्री रिग्रेशन सिलेक्टर स्पेसिफिसिटी को बढ़ाने के बजाय उस कंपोनेंट को रोलबैक करता है।

7. सामान्य गलतियाँ

• @scope को Shadow DOM के रूप में मानना: DOM, इवेंट्स और वेरिएबल्स शेयर्ड रहते हैं; वह प्रिमिटिव चुनें जो आइसोलेशन लक्ष्य से मेल खाता हो।
• सिलेक्टर्स बदलना लेकिन लेयर्स को अनदेखा करना: एक पुराना नियम अभी भी एक उच्च लेयर में जीत सकता है; लेयर्स और स्टेट प्राथमिकता को एक साथ परिभाषित करें।
• पूरे एप्लिकेशन को एक स्कोप में लपेटना: कंपोनेंट सीमाओं से कम लाभ होता है और रोलबैक कठिन हो जाता है; कंपोनेंट रूट द्वारा विभाजित करें।
• पुराने ब्राउज़रों को नियम की अनदेखी करने देना: क्रिटिकल स्टाइल्स गायब हो जाती हैं; एक नेमस्पेस्ड लीगेसी पाथ शिप करें और एक कैपेबिलिटी मैट्रिक्स का परीक्षण करें।
• उच्च स्पेसिफिसिटी के साथ रिग्रेशन को ठीक करना: कपलिंग और ओवरराइड लागत बढ़ती है; रूट, स्कोप लिमिट और कैस्केड लेयर को फिर से तैयार करें।

8. फॉलो-अप प्रश्न और उत्तर

फॉलो-अप 1: क्या @scope किसी चाइल्ड कंपोनेंट को थीम वेरिएबल्स इनहेरिट करने से रोक सकता है?

नहीं। यह मुख्य रूप से सिलेक्टर मैचिंग को सीमित करता है; कस्टम प्रॉपर्टीज अभी भी CSS इनहेरिटेंस का पालन करती हैं। चाइल्ड रूट पर वेरिएबल्स को ओवरराइड करें या एक अलग वेरिएबल वातावरण की आवश्यकता होने पर Shadow DOM का उपयोग करें।

फॉलो-अप 2: जब नेस्टेड स्कोप्स एक ही एलिमेंट से मेल खाते हैं तो क्या जीतता है?

सामान्य कैस्केड और स्कोप-संबंधी क्रम अभी भी लागू होते हैं; "इनर स्कोप हमेशा जीतता है" एक सुरक्षित नियम नहीं है। स्कोप्स को परिभाषित लेयर्स में रखें और ब्राउज़र DevTools में एक न्यूनतम रिप्रोडक्शन का निरीक्षण करें।

फॉलो-अप 3: असमर्थित ब्राउज़र कैसे सुसंगत रहते हैं?

वेरिएबल्स, स्टेट और लेयर सिमेंटिक्स को संरक्षित करते हुए, उन्हीं सोर्स नियमों से नेमस्पेस्ड सिलेक्टर्स या स्थिर CSS-Module क्लासेस जेनरेट करें। रनटाइम डिटेक्शन एक इम्प्लीमेंटेशन पाथ का चयन करता है; बिजनेस कंपोनेंट्स को दो स्टेट मशीनों को बनाए नहीं रखना चाहिए।