在我的聚合物项目中，我在两个页面中使用了一个vaadin-combobox，如下所示： - 第1页：我创建了一个自定义组合框样式文件并导入到我的页面：
<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">
本文件内容：
<dom-module id="vaadin-text-field-custom-radius-theme" theme-for="vaadin-text-field">
<template>
<style>
[part="input-field"] {
border-radius: 2px;
background-color: white;
border: 1px solid #808080;
height: 100%;
font-family: "Roboto", sans-serif !important;
color: #4c4c4c !important;
padding-left: 10px;
font-size: 14px;
box-sizing: border-box;
max-height: 100%;
background-color: transparent;
background-image: none !important;
}
[part="value"] {
border: 0px !important;
box-shadow: none !important;
height: 100%;
box-sizing: border-box;
max-height: 100%;
background-color: transparent;
text-align: var(--cmb-align,left);
}
.vaadin-text-field {
height: 100%;
box-sizing: border-box;
max-height: 100%;
}
.vaadin-text-field-container {
height: 100%;
box-sizing: border-box;
max-height: 100%;
}
@media(max-width:1024px){
[part="input-field"] {
font-size: 12px !important;
padding-left: 5px;
}
[part="value"] {
font-size: 12px !important;
}
}
</style>
</template>
在第2页中，我有另一个带有其他一些css属性的自定义样式文件。
我使用
this.set('route.path',"/page2")
从第 1 页重定向到第 2 页，然后使用
this.set('route.path',"/page1")
以返回第 1 页。 目前，我在 page1 中的组合框由我已导入第 2 页的自定义文件中定义的 css 设置样式(虽然我希望它仍然由 vaadin-text-field-custom-radius-theme.html"中的 css 设置样式)。 有人能告诉我为什么吗？
p/s：我尝试实现安东·普拉托诺夫的建议，但我发现如果我的第 2 页不导入任何自定义样式文件，当我从第 2 页返回到第 1 页时，在 ..\bower_components\vaadin-text-field\vaadin-text-field.html 用于我的组合框，而不是我的 vaadin-text-field-custom-radius-theme.html。
如果我删除 vaadin-text-field.html 中的样式默认值，我的组合框从浏览器的默认样式中恢复了 css，仍然不是我的 vaadin-text-field-custom-radius-theme.html。 它被视为我的vaadin-text-field-custom-radius-theme不再存在。
如果我参考我的第 1 页，一切都会变得正常。 这是我的组合框代码：
<vaadin-combo-box-light style="width:100%;height:30px" id="cmdCompanyName" class="fix-size combobox" label="" allow-custom-value items='[[companies]]'
value="" item-label-path="name" item-value-path="id" attr-for-selected="id" on-keyup="searchData"
on-custom-value-set="searchData2" on-value-changed="searchData2">
<vaadin-text-field style="width:100%;height:30px;" class="cmb-text-field" maxlength="150">
<iron-icon class="prefix" icon="icons:search" slot="prefix"></iron-icon>
<iron-icon class="suffix toggle-button" slot="suffix" icon="icons:expand-more"></iron-icon>
</vaadin-text-field>
</vaadin-combo-box-light>
我假设您的项目是单页应用程序，并且您使用<app-route>/<iron-pages>或类似的路由。通过这种方式，浏览器实际上使用单个真实文档，然后对其进行操作以实现"页面"和导航。
由于技术限制，Vaadin 组件的主题样式模块不是您期望的动态模块。加载并初始化主题和组件后，它们的样式将记录在其相应组件的类中。
假设您首先加载"page2"。加载后，<vaadin-text-field>会记住其样式，并且可以应用更多主题模块。这就是为什么当您导航到"page1"时，<vaadin-text-field>将继续使用"page2"中的记忆样式。
这意味着，您必须在所有实例中使用相同的集合样式，例如，<vaadin-text-field>，在文档中。因此，您必须使用其他方法来使它们看起来不同，而不是交换样式。以下是一些选项。
范围:host()选择器
为所有自定义主题样式添加范围:host()选择器的前缀，例如：
<dom-module id="my-text-field" theme-for="vaadin-text-field">
<template>
<style>
:host(.no-radius) [part="input-field"] {
border-radius: 0;
}
</style>
</template>
</dom-module>
然后在 html 中使用：
<h3>Default appearance</h3>
<vaadin-text-field></vaadin-text-field>
<h3>No-radius class</h3>
<vaadin-text-field class="no-radius"></vaadin-text-field>
自定义 CSS 属性
在<vaadin-text-field>的父 DOM 作用域中定义一个自定义 CSS 属性，例如，在页面组件中：
<dom-module id="page-1">
<template>
<style>
:host {
--custom-radius: 4px;
}
</style>
<vaadin-text-field></vaadin-text-field>
</template>
</dom-module>
<script>
Polymer({is: 'page-1'});
</script>
您还可以为主文档范围定义一些其他值：
<custom-style>
<style>
html {
--custom-radius: 0;
}
</style>
</custom-style>
使用主题样式模块中定义的自定义 CSS 属性进行<vaadin-text-field>：
<dom-module id="my-text-field" theme-for="vaadin-text-field">
<template>
<style>
[part="input-field"] {
border-radius: var(--custom-radius);
}
</style>
</template>
</dom-module>
然后查看结果：
<h3>Main document appearance:</h3>
<vaadin-text-field></vaadin-text-field>
<h3>Page 1 appearance:</h3>
<page-1></page-1>
另请参阅：https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module