छाया DOM में ::content/:स्लॉटेड छद्म-तत्व का अनावरण

छाया DOM, वेब घटकों का एक महत्वपूर्ण पहलू, परिचय देता है सामग्री को संपुटित करने और अलग करने का एक नया तरीका। इस दायरे में, ::सामग्री (जिसे पहले ::स्लॉटेड के नाम से जाना जाता था) छद्म तत्व शैडोट्री के भीतर वितरित नोड्स की गहरी स्टाइलिंग को सक्षम करने में महत्वपूर्ण भूमिका निभाता है।

पेश है ::सामग्री

::सामग्री छद्म-तत्व एक चयनकर्ता है जो किसी तत्व के अंदर वितरित नोड्स पर लागू होता है। यह लाइटडोम से शैडोडोम में सामग्री को सम्मिलित करने की सुविधा के लिए (अब ) टैग के साथ काम करता है।

वितरित नोड्स को लक्षित करना

जब तत्व मार्कअप में अपनी मूल स्थिति से शैडोट्री के भीतर किसी अन्य स्थान पर ले जाया जाता है, वे वितरित नोड बन जाते हैं। ::सामग्री इन वितरित नोड्स के विशिष्ट लक्ष्यीकरण की अनुमति देती है, जो उन शैलियों को लागू करने का एक तरीका प्रदान करती है जो उनके नए स्थान के लिए विशिष्ट हैं।

उदाहरण

निम्नलिखित कोड पर विचार करें स्निपेट:

#slides::content img {
    width: 25%;
    float: left;
}

यहां, ::सामग्री चयनकर्ता का उपयोग #slides तत्व के भीतर वितरित छवियों को लक्षित करने के लिए किया जाता है। इन छवियों पर लागू शैलियाँ केवल शैडोडोम में मौजूद प्रतियों को प्रभावित करेंगी, लाइटडोम से अलगाव प्रदान करेंगी।

निष्कर्ष

::सामग्री (या ::स्लॉटेड) ) छद्म-तत्व शैडो डोम में एक अनिवार्य उपकरण है, जो वेब डेवलपर्स को लाइटडोम में तत्वों के साथ हस्तक्षेप किए बिना वितरित नोड्स को गहराई से स्टाइल करने की सुविधा देता है। यह एनकैप्सुलेशन और चिंताओं को अलग करने में सक्षम बनाता है, जिससे वेब अनुप्रयोगों की समग्र रखरखाव और लचीलेपन में वृद्धि होती है।