无法访问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所说，我不确定我想要做什么实际上是可能的。