無法訪問Polymer Element中的「自定義樣式」資源

Question

我正在編寫一個基本的聚合物組件，該組件應該也能夠在屬性更改時更改其樣式。

當我嘗試更改主題文件時，我使用id來檢索它，但我總是得到空值。

這裏是我的代碼：

[other polymer imports] 
<link rel="import" href="/themes/my-theme.html" id="current_theme"/> 

<dom-module id="my-app"> 
<template> 
    <style> 
    :host{ 
    font-family: 'Roboto', 'Noto', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    } 

    :host ::content app-header{ 
    background: var(--app-primary-color); 
    color: var(--app-text-color); 
    } 

    :host ::content user-app-toolbar{ 
    background: var(--app-primary-color); 
    color: var(--app-text-color); 
    } 
    ... 
</style> 

... 
<script> 
Polymer({ 
    is: 'my-app', 

    properties: { 
    state: { 
     type: String, 
     reflectToAttribute: true, 
     observer: '_stateChanged', 
    }, 
    }, 
    _stateChanged: function(page) { 
    // get theme file 
    theme.href = '/theme/red.html'; 
    } 
}); 
</script> 
</template> 
</dom-module> 

我-theme.html

<style is="custom-style"> 
    my-app { 
    --app-primary-color: grey; 
    --app-secondary-color: black; 
    --app-text-color: white; 
} 
</style> 

的問題是如何實現 「讓主題文件」。我嘗試了很多東西：

• document.querySelector（「＃current_theme」）： [返回null，我想這是因爲它使用的主文檔而不是元素的一個]
• 聚合物（DOM ）.querySelector（ 'current_theme'）：[未定義]
• 這個$$ [ 「current_theme」] [未定義]

如何做到這一點任何想法？

PS：以這種方式改變主題的想法是從這個stack overflow question

Answer 1

靜態

你需要把一個樣式標籤與主題ID（聚合物2.0）取

<link rel="import" href="/themes/my-theme.html"/> 

<dom-module id="my-app"> 
    <template> 
    <style include="my-theme-xxx"></style> 
    <style> 
     :host{ 
     ... 

我-theme.html

<dom-module id="my-theme-xxx"><template><style> 
    my-app { 
    --app-primary-color: grey; 
    --app-secondary-color: black; 
    --app-text-color: white; 
    } 
</style></template></dom-module> 

動態

然而，我發現，只有這種方式，通過主題dynamicaly改變元素的CSS。

<link rel="import" href="my-css.html"> 

<dom-module id="my-app"> 
    <template> 
    <style include="my-css"></style> 
    <button class="btn-primary-dark">Dark button</button> 
    <button class="btn-primary-light">Light button</button> 
    <button class="btn-primary-default">Default button</button> 
    <br><br> 
    <button on-click="setTheme1">Set theme 1</button> 
    <button on-click="setTheme2">Set theme 2</button> 
    </template> 
    <script> 
    class MyApp extends Polymer.Element { 
     static get is() { return 'my-app'; } 

     // Dynamicaly change vars 
     setTheme1() { 
     Polymer.updateStyles({ 
      '--dark-primary-color' : '#689F38', 
      '--default-primary-color' : '#8BC34A', 
      '--light-primary-color' : '#DCEDC8', 
      '--text-primary-color' : '#212121' 
     }); 
     } 
     setTheme2() { 
     Polymer.updateStyles({ 
      '--dark-primary-color' : '#1f8f37', 
      '--default-primary-color' : '#818bbf', 
      '--light-primary-color' : '#f0e82f', 
      '--text-primary-color' : '#333333' 
     }); 
     } 

    } 
    window.customElements.define(MyApp.is, MyApp); 
    </script> 
</dom-module> 

我-css.html

<dom-module id="my-css"> 
    <template> 
    <style> 
     .btn-primary-dark { 
      background-color: var(--dark-primary-color); 
      color: var(--secondary-text-color); 
     } 
     .btn-primary-light { 
      background-color: var(--light-primary-color); 
      color: var(--secondary-text-color); 
     } 
     .btn-primary-default { 
      background-color: var(--default-primary-color); 
      color: var(--secondary-text-color); 
     } 
    </style> 
    </template> 
</dom-module> 

Answer 2

挖掘到聚合物的文檔，我發現這句話從這位官員聚合物文檔page

注意：您應該只使用定製式爲主文檔定義樣式。要爲元素的本地DOM定義樣式，只需使用<樣式>塊。

而且，從這個舊的documentation

通常你想在文檔級別定義自定義屬性值，設置一個主題爲整個應用程序，例如。由於自定義屬性尚未內置到大多數瀏覽器中，因此需要使用特殊的自定義樣式標記來定義聚合物元素之外的自定義屬性。嘗試添加您的index.html文件

移動的我的theme.html到index.html頁面的標記中下面的代碼，我能夠使用從我的聚合物元件檢索

document.querySelector('#current_theme') 

除此之外，我無法動態更改主題。但由於問題的標題是關於訪問資源的問題，我解決了移動它的問題。正如craPkit所說，我不確定我想要做什麼實際上是可能的。