私のポリマー プロジェクトでは、次のように 2 つのページで vaadin-combobox を使用します: - page1: カスタム コンボボックス スタイル ファイルを作成し、ページにインポートします。
<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>
page2 には、他のいくつかの css プロパティを持つ別のカスタム スタイル ファイルがあります。
私が使う
this.set('route.path',"/page2")
page1 から page2 にリダイレクトしてから使用する
this.set('route.path',"/page1")
page2 で page1 を返します。この時点で、ページ 1 のコンボボックスは、ページ 2 にインポートしたカスタム ファイルで定義された css によってスタイル設定されています (まだ vaadin-text-field-custom-radius-theme.html の css によってスタイル設定されていると予想していましたが)。理由を教えてください。
p/s: Anton Platonov の提案を実装しようとしましたが、ページ 2 がカスタム スタイル ファイルをインポートしない場合、ページ 2 からページ 1 に戻ると、で定義された vaadin-text-field のデフォルト スタイルが..\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>