बाहरी स्टाइलिंग के लिए Part और Exportparts
part और exportparts से shadow DOM के भाग बाहरी CSS के लिए उपलब्ध कराएँ
बाहरी स्टाइलिंग के लिए Part और Exportparts, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
एनकैप्सुलेशन का समझौता
शैडो DOM का सख्त स्टाइल एनकैप्सुलेशन उपभोक्ताओं को किसी घटक के अंदरूनी एलिमेंट्स को फिर से स्टाइल करने से रोकता है। CSS वैरिएबल्स वैश्विक गुणों के लिए काम करते हैं, लेकिन उदाहरण के लिए आप अंदरूनी "close" बटन को अपनी पसंद का border-radius नहीं दे सकते। parts इस समस्या का समाधान करते हैं।
part गुण
शैडो के अंदरूनी एलिमेंट पर part="name" लगाएँ। इसके बाद उपभोक्ता उसे ::part(name) स्यूडो-एलिमेंट के माध्यम से लक्ष्य बना सकते हैं: my-dialog::part(close-button) { color: red; }। नामित एलिमेंट एक स्टाइलिंग हुक बन जाता है, जबकि शैडो का बाकी हिस्सा एनकैप्सुलेट रहता है।
// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
color: red;
border-radius: 50%;
}एक एलिमेंट पर कई parts
किसी एक एलिमेंट को कई parts के रूप में उपलब्ध कराने के लिए नामों को स्पेस से अलग करें: part="button primary"। ::part(button) इसे सामान्य रूप से लक्ष्य बनाता है, जबकि ::part(primary) इसे प्राथमिक-शैली वाले एलिमेंट के रूप में लक्ष्य बनाता है। हर नाम का मिलान स्वतंत्र रूप से किया जाता है।
::part की सीमाएँ
::part केवल कुछ स्यूडो-क्लास (:hover, :focus, :disabled) की अनुमति देता है — वंशज संयोजकों या आगे के संरचनात्मक चयन से नहीं। ::part(card) p अमान्य है; आप वंशज चयनकर्ताओं के माध्यम से किसी part के अंदर तक नहीं पहुँच सकते।
exportparts parts को आगे भेजता है
जब कोई कस्टम एलिमेंट अपने शैडो के अंदर किसी दूसरे कस्टम एलिमेंट को रखता है, तो अंदरूनी एलिमेंट के parts सामान्यतः बाहरी पेज पर उपलब्ध नहीं होते। नेस्ट किए गए एलिमेंट पर exportparts="close-button" उन parts को बाहरी होस्ट तक आगे भेजता है।
// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }निर्यात करते समय नाम बदलना
exportparts="close-button: dismiss" अंदरूनी part को बाहरी एलिमेंट पर नए नाम के रूप में निर्यात करता है। इससे बाहरी घटक एक साफ़ नामकरण सतह प्रस्तुत कर सकता है, चाहे वह किन अंदरूनी एलिमेंट्स को संयोजित करता हो।
parts बनाम CSS कस्टम प्रॉपर्टीज़
कस्टम प्रॉपर्टीज़ मान उपलब्ध कराती हैं (रंग, स्पेसिंग और फ़ॉन्ट)। parts एलिमेंट्स उपलब्ध कराते हैं (बॉर्डर, ट्रांसफ़ॉर्म और ऐनिमेशन सहित पूरी CSS सतह)। वैश्विक टोकन के लिए कस्टम प्रॉपर्टीज़ और किसी एक एलिमेंट के स्तर पर विशेष अनुकूलन के लिए parts का उपयोग करें। दोनों एक ही घटक में साथ रह सकते हैं।
थीमिंग का तरीका
डिज़ाइन सिस्टम में सामान्य तरीका यह है कि सबसे अधिक अनुकूलित किए जाने वाले एलिमेंट्स (बटन, हेडर और संकेतक) के लिए parts की एक छोटी सतह उपलब्ध कराई जाए, साथ ही रंग, स्पेसिंग और टाइपोग्राफ़ी के लिए कस्टम प्रॉपर्टीज़ का व्यापक सेट दिया जाए। उपभोक्ता अपनी आवश्यकता के अनुसार मान के स्तर पर या एलिमेंट के स्तर पर थीम तय कर सकते हैं।
part नामों की स्थिरता
part नाम घटक के सार्वजनिक API का हिस्सा बन जाते हैं — उन्हें बदलने पर उपभोक्ताओं की CSS टूट जाती है। एलिमेंट की भूमिका बताने वाले नाम चुनें ("close-button", "header", "track"), न कि उसकी स्थिति बताने वाले नाम ("first-button"), ताकि कार्यान्वयन बदलने पर भी API अर्थपूर्ण बना रहे।
दस्तावेज़ीकरण संबंधी संकेत
घटक की रीडमी में सभी उपलब्ध parts और निर्यात किए गए parts की सूची दें। दस्तावेज़ीकरण के बिना, उपभोक्ताओं को parts खोजने के लिए DOM का निरीक्षण करना पड़ता है, जिससे वे उन चीज़ों से जुड़ जाते हैं जो उन्हें संयोग से मिलती हैं। parts की सूची को किसी फ़्रेमवर्क घटक की props सूची की तरह API का हिस्सा मानें।
ब्राउज़र समर्थन
::part और exportparts सभी आधुनिक ब्राउज़रों में उपलब्ध हैं। पुराने Safari संस्करण भी अब ::part का समर्थन करते हैं। इनका स्वतंत्र रूप से उपयोग करें; बहुत पुराने ब्राउज़रों (जो लगभग अप्रचलित हो चुके हैं) के लिए वैकल्पिक उपाय के रूप में अतिरिक्त CSS कस्टम प्रॉपर्टीज़ का उपयोग करें।
ज्ञान जाँच
exportparts गुण क्या करता है?
सारांश
part गुण अलग-अलग शैडो एलिमेंट्स को ::part(name) के माध्यम से बाहरी स्टाइलिंग के लिए उपलब्ध कराता है — एनकैप्सुलेशन तोड़े बिना CSS की पूरी शक्ति मिलती है। exportparts नेस्ट किए गए कस्टम एलिमेंट्स से parts को बाहरी होस्ट तक आगे भेजता है और आवश्यकता होने पर उनके नाम भी बदल सकता है। पूरी थीमिंग सतह के लिए parts को CSS कस्टम प्रॉपर्टीज़ के साथ मिलाएँ और part सूची को घटक API के हिस्से के रूप में दस्तावेज़ित करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “बाहरी स्टाइलिंग के लिए Part और Exportparts” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “बाहरी स्टाइलिंग के लिए Part और Exportparts” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“बाहरी स्टाइलिंग के लिए Part और Exportparts” में मैं क्या सीखूँगा?
part और exportparts से shadow DOM के भाग बाहरी CSS के लिए उपलब्ध कराएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“बाहरी स्टाइलिंग के लिए Part और Exportparts” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- attachShadow और Shadow Root
- सामग्री वितरण के लिए Slot एलिमेंट
- Shadow DOM के भीतर सीमित शैलियाँ
- बाहरी स्टाइलिंग के लिए Part और Exportparts