मैं एक ऐसे तत्व तक कैसे पहुँच सकता हूँ जो छाया-मूल के अंदर गहरा है?

<vaadin-combo-box>
        #shadow-root
            <vaadin-text-field id="input">
                <vaadin-combo-box-dropdown-wrapper id="overlay">
                    #shadow-root(open)
                        <vaadin-combo-box-dropdown id="dropdown">
                            #shadow-root(open)
                                <vaadin-combo-box-overlay id="overlay">
                                    #shadow-root(open)
                                     <div part="overlay" id="overlay">
                                        <div part="content" id="conent">
                                            #shadow-root(open)
                                                <div id="scroller">
                                                    <iron-list id="selector">
                                                        #shadow-root(open)
                                                            <vaadin-combo-box-item>
                                                                ......
                                                               

मैं एक vaadin-combo-box-item तत्व को स्टाइल करना चाहता हूं लेकिन मुझे नहीं पता कि इस तत्व तक कैसे पहुंचा जाए।

1
AmAn KumAr 23 अक्टूबर 2020, 18:09

1 उत्तर

सबसे बढ़िया उत्तर

इसका कोई आसान जवाब नहीं है क्योंकि आपको बहुत गहरे DOM तत्व तक पहुंचना है।

इसे थोड़ा कम दर्दनाक बनाने के लिए आपको एक ऐसा फ़ंक्शन बनाना होगा जो इस तरह के तत्व की छाया डोम प्रदान करे:

const getShadowRoot = (elem, selector) => elem.shadowRoot.querySelector(selector);

const vaadinComboBox = getShadowRoot(document, 'vaadin-combo-box');
const vaadinTextField = getShadowRoot(vaadinComboBox, '#input');
const vaadinComboBoxWrapper = getShadowRoot(vaadinTextField, '#overlay');
const vaadinComboBoxDropdown = getShadowRoot(vaadinComboBoxWrapper, '#dropdown');
const vaadinComboBoxOverlay = getShadowRoot(vaadinComboBoxDropdown, '#overlay');
const vaadinComboBoxContent = getShadowRoot(vaadinComboBoxOverlay, '#conent');
const vaadinComboBoxSelector = getShadowRoot(vaadinComboBoxContent, '#selector');
const vaadinComboBoxItem = getShadowRoot(vaadinComboBoxContent, 'vaadin-combo-box-item');

फिर भी, छायाडोम तत्वों की यह मात्रा एक वास्तुशिल्प गलती की तरह दिखती है

1
AmAn KumAr 2 पद 2020, 14:22