vaadin 组合框加载错误的自定义样式

Question

在我的聚合物项目中，我在两页中使用了一个 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")

第 2 页到 return 第 1 页。此时我在 page1 中的组合框的样式由我导入到第 2 页的自定义文件中定义的 css 设计（虽然我预计它仍然由 vaadin-text-field-custom-radius- 中的 css 设计theme.html")。有人能告诉我为什么吗？

p/s:我尝试执行Anton Platonov的建议，但我发现如果我的第2页没有导入任何自定义样式文件，当我return从第2页到第1页时，在 ..\bower_components\vaadin-text-field\vaadin-text-field.html 中定义的 vaadin-text-field 的默认样式用于我的组合框而不是我的 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>

Answer 1

我假设您的项目是单页应用程序，并且您使用 <app-route>/<iron-pages> 或类似的路由。这样浏览器实际上使用单个真实文档，然后对其进行操作以实现 "pages" 和导航。

由于技术限制，Vaadin 组件的主题样式模块并不像您期望的那样动态。加载和初始化主题和组件后，它们的样式将存储在相应组件的类中。

假设您先加载 "page2"。加载后，<vaadin-text-field> memoizes its styles，可以应用更多的主题模块。这就是为什么当您导航到 "page1" 时，<vaadin-text-field> 将继续使用来自 "page2".

的记忆样式

这意味着，您必须在所有实例中使用相同的集合样式，例如。 G。， <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 属性，例如。 g., 在页面组件中：

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

在 <vaadin-text-field> 的主题样式模块中使用定义的自定义 CSS 属性:

<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

vaadin 组合框加载错误的自定义样式

vaadin combobox load wrong custom style

polymer

vaadin-elements

polymer-2.x

范围 `:host()` 选择器

自定义 CSS 属性

vaadin 组合框加载错误的自定义样式

vaadin combobox load wrong custom style

polymer

vaadin-elements

polymer-2.x

范围 :host() 选择器

自定义 CSS 属性

范围 `:host()` 选择器