Vaadin-combo-box: عناصر مربع التحرير والسرد التصميم

هل هناك حل متاح؟

نظرًا لأن الأنماط الخارجية لا تتغلغل في Shadow DOM ، فأنت بحاجة إلى استيراد ملف CSS داخل Shadow DOM.

ربما يساعد هذا الموضوع StackOverflow .

بناءً على الإجابة الثانية في هذا الموضوع ، يجب أن يعمل <link rel="stylesheet"> داخل shadow DOM. لذلك يمكن أن يعمل شيء من هذا القبيل في 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);

لم أختبر هذه المقتطفات بنفسي بشكل صحيح.

@ steffen-harbich-itc ، هل نجحت في إنجاحه باستخدام أحد هذه الأساليب أو بطريقة أخرى؟ سأكون مهتمًا بسماع ذلك. :)

حاولت اقتراح الثاني وأنه يعمل. لم أحاول النهج الأول. ومع ذلك ، حاولت إضافة " import ..." إلى Shared-styles.html الخاص بي بتنسيق

 <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 والمكونات المضافة.

تتعلق قابلية تصميم العناصر وما إذا كان يجب أن تكون داخل Shadow DOM أم لا بمكون الويب (يتضمن هذا المستودع فقط غلاف Java الخاص به) ، لذلك سأقوم بنقل هذه التذكرة إلى مستودع vaadin-combo-box.

الطريقة الصحيحة للتعامل مع هذا هي إنشاء 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 .
يجب علينا توثيق قيود shadow DOM & CSS الخارجية في موقع المستندات الجديد.

وإلا فلن يكون هناك شيء نفعله هنا. لذا اسمحوا لي أن أغلق هذا لأنه ليس خطأ.

ما زلت أتوقع أنه لا ينبغي وضع عناصر مربع التحرير والسرد داخل Shadow DOM ولكن في فتحات منفصلة.

لا ينبغي وضع عناصر مربع التحرير والسرد داخل Shadow DOM ولكن في فتحات منفصلة.

يمكننا اعتبار هذا بمثابة تغيير كسر محتمل في الإصدار الرئيسي التالي.

يجب أن يتم تعريض العناصر بطريقة تعمل مع مكون سكرولر الافتراضي (والذي سيتم تغييره بالتأكيد من iron-list إلى شيء آخر - يجب تحديده).