Vaadin-combo-box: स्टाइलिंग कॉम्बो बॉक्स आइटम

क्या कोई उपाय उपलब्ध है?

चूंकि बाहरी शैलियाँ छाया DOM में प्रवेश नहीं करती हैं, इसलिए आपको CSS फ़ाइल को छाया DOM के अंदर आयात करने की आवश्यकता है।

शायद यह स्टैक ओवरफ्लो थ्रेड मदद करता है।

उस धागे में दूसरे उत्तर के आधार पर, <link rel="stylesheet"> छाया डोम के अंदर काम करना चाहिए। तो ऐसा कुछ आपके ComponentRenderer में काम कर सकता है:

Element link = new Element("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "./frontend/bower_components/flag-icon-css/css/flag-icon.min.css");
item.getElement().appendChild(link);

...या पहले उत्तर में सुझाए गए @import का उपयोग करना:

Element style = new Element("style");
style.setProperty("innerHTML", "<strong i="15">@import</strong> \"./frontend/bower_components/flag-icon-css/css/flag-icon.min.css\"");
item.getElement().appendChild(style);

हालांकि मैंने खुद इन स्निपेट्स का ठीक से परीक्षण नहीं किया है।

@ स्टीफन-हार्बिच-आईटीसी, क्या आपने उन तरीकों में से किसी एक या किसी अन्य तरीके का उपयोग करके इसे काम करने का प्रबंधन किया? मुझे सुनने में दिलचस्पी होगी। :)

मैंने आपके दूसरे सुझाव की कोशिश की और यह काम कर गया । मैंने पहले दृष्टिकोण की कोशिश नहीं की। हालांकि, मैंने अपने साझा-styles.html in . में " @import ..." जोड़ने का प्रयास किया

 <dom-module id="my-combo-box-theme" theme-for="vaadin-combo-box">
   <template>
     <style>...

लेकिन वह काम नहीं किया।

तो इस मुद्दे के लिए एक समाधान उपलब्ध है लेकिन IMO अभी भी ListItems के विपरीत व्यवहार के साथ कुछ असंगत है।

यह सुनकर अच्छा लगा कि कम से कम एक दृष्टिकोण काम करता है!

आपके साझा-शैली दृष्टिकोण के बारे में: आपको theme-for="vaadin-combo-box-item" सेट करना चाहिए, क्योंकि यही वह तत्व है जिसमें शैलियों को इंजेक्ट किया जाना चाहिए। हालांकि, यह अभी भी ComponentRenderer साथ काम नहीं कर सकता है, क्योंकि यह रेंडरर vaadin-combo-box-item और आपके जोड़े गए घटकों के बीच अतिरिक्त वेब घटक (और इस प्रकार छाया-रूट) बनाता है।

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

इसे संभालने का एक सही तरीका इस तरह से dom-module होगा:

<dom-module id="my-item-css" theme-for="vaadin-combo-box-item">
  <template>
    <style>
    /* styles from flag-icons.css */
    </style>
  </template>
</dom-module>

@import का उपयोग करना काम करने की गारंटी नहीं है और इसकी अनुशंसा नहीं की जाती है।

समस्या का कोई आसान समाधान नहीं है, और यह vaadin-combo-box घटक के लिए विशिष्ट नहीं है।
हमें नई डॉक्स साइट में छाया डोम और बाहरी सीएसएस की सीमाओं का दस्तावेजीकरण करना चाहिए।

नहीं तो हमारे यहाँ करने के लिए कुछ नहीं है। तो मुझे इसे बंद करने दें क्योंकि यह कोई बग नहीं है।

मैं अभी भी उम्मीद करता हूं कि कॉम्बो बॉक्स आइटम को छाया डोम के भीतर नहीं बल्कि अलग स्लॉट में रखा जाना चाहिए।

कॉम्बो बॉक्स आइटम को छाया डोम के भीतर नहीं बल्कि अलग स्लॉट में रखा जाना चाहिए।

हम इसे अगली बड़ी रिलीज़ में एक संभावित ब्रेकिंग बदलाव के रूप में मान सकते हैं।

वस्तुओं का खुलासा इस तरह से किया जाना चाहिए कि वे वर्चुअल स्क्रोलर घटक के साथ काम करें (जिसे निश्चित रूप से iron-list से कुछ और में बदल दिया जाएगा - तय किया जाना है)।