बहुलक सीएसएस चर का उपयोग

Question

मैं पॉलिमर के साथ कस्टम सीएसएस चर का उपयोग करने के तरीके के बारे में अपना सिर नहीं प्राप्त कर सकता। फिलहाल मैं "लौह-ओवरले-व्यवहार" के साथ ओवरले बना रहा हूं।

इसमें "लौह-ओवरले-बैकड्रॉप" तत्व शामिल है जिसमें विभिन्न सीएसएस चर परिभाषित किए गए हैं। जिसकी मुझे दिलचस्पी है वह मुख्य रूप से --रॉन-ओवरले-बैकड्रॉप-अस्पष्टता है।

मैं

<style is="custom-style"> 
    :root { 
     --iron-overlay-backdrop-opacity: 0.4; 
    } 
</style> 

जोड़कर इन मेरी मुख्य index.html फ़ाइल में काम करने के लिए प्राप्त कर सकते हैं लेकिन मैं वहाँ शैलियों परिभाषित नहीं करना चाहते हैं! मैं उन्हें अपने कस्टम ओवरले तत्व के अंदर परिभाषित करना चाहता हूं।

मैं इन्हें अपने कस्टम तत्व के अंदर कैसे उपयोग करूं?

मैं उन्हें इस

<dom-module id="faq-overlay"> 

<style> 

:host { 
    --iron-overlay-backdrop-opacity: 0.3; 
    --iron-overlay-backdrop-background-color: red; 
} 
... 

तरह का उपयोग कर की कोशिश की है लेकिन यह काम नहीं करता। क्या इसे करने का कोई तरीका है?

Answer 1

मेरा मानना ​​है कि क्या आप देख रहे हैं यह है:

<style is="custom-style"> 
    :root { 
    --iron-overlay-backdrop-opacity: 0.7; 
    --background-r: 0; 
    --background-g: 0; 
    --background-b: 255; 
    --background-color: blue; 
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity)); 
    } 
</style> 

, कारण (अपने विषय फ़ाइल में) और अपने कस्टम तत्व में

<style is="custom-style"> 
    :host paper-material.custom { 
     background-color: var(--iron-overlay-backdrop-background-color); 
    } 
</style>