vaadin combobox load wrong custom style

In my polymer project , i use a vaadin-combobox in two page like this: - page1: i create a custom combobox style file and import to my page:

<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">

content of this file:

<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>

In page2 ,I have another custom style file with some other css properties.

I use

this.set('route.path',"/page2")

to redirect from page1 to page2 and then use

 this.set('route.path',"/page1")

in page2 to return page1. At this time my combobox in page1 is styled by css defined in custom file that i have imported to page 2 ( while i expected it's still styled by css in vaadin-text-field-custom-radius-theme.html"). Can some one tell me why?

p/s:I tried implement the suggestion of Anton Platonov, but i found that if my page 2 don't import any custom style file, When i return from page2 to page1, the default style of vaadin-text-field that defined in ..\bower_components\vaadin-text-field\vaadin-text-field.html is used for my combobox instead of my vaadin-text-field-custom-radius-theme.html.

If i remove style default in vaadin-text-field.html, my combobox revice css from browser's default style, still not my vaadin-text-field-custom-radius-theme.html. It's treated like my vaadin-text-field-custom-radius-theme no longer exists.

And if i refesh my page 1, everything become normal. this is my combobox code:

<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>

Solution

I assume, your project is a Single Page Application, and you use <app-route>/<iron-pages> or a similar routing. This way the browser actually uses a single real document, which is then manipulated to achieve "pages" and navigation.

Due to technical limitations, theme style modules for Vaadin components are not dynamic in the way you expect. Once themes and components are loaded and initialised, their styles become memoized in the classes of their corresponding components.

Suppose you load "page2" first. After loading, <vaadin-text-field> memoizes its styles, and more theme modules can be applied. That is why when you navigate to "page1", <vaadin-text-field> will continue using the memoized style from "page2".

This means, you have to use same set styles in all the instances of, e. g., <vaadin-text-field>, in the document. Therefore, you have to use other means to make them look differently, instead of swapping styles. Here are some options.

Scoping `:host()` selectors

Prefix all the custom theme styles with a scoping :host() selector, for example:

<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>

Then use in the 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>

Custom CSS properties

Define a custom CSS property in the <vaadin-text-field>’s parent DOM scope, e. g., in a page component:

<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>

You can also define some other value for the main document scope:

<custom-style>
  <style>
    html {
      --custom-radius: 0;
    }
  </style>
</custom-style>

Use the defined custom CSS property in the theme style module for <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>

Then see the results:

<h3>Main document appearance:</h3> 
<vaadin-text-field></vaadin-text-field>

<h3>Page 1 appearance:</h3>
<page-1></page-1>

vaadin combobox load wrong custom style

Scoping :host() selectors

Custom CSS properties

Scoping `:host()` selectors