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>

在第2页中，我有另一个带有其他css属性的自定义样式文件。

我用

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

从page1重定向到page2，然后使用

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

第2页中的

返回page1。这时我在page1中的组合框由我导入到第2页的自定义文件中定义的css设置样式（虽然我预计它仍然由vaadin-text-field-custom-radius-theme.html中的css设置样式）。有人可以告诉我为什么吗？

p / s：我试过实现Anton Platonov的建议，但我发现如果我的第2页没有导入任何自定义样式文件，当我从page2返回到page1时，默认样式为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>

Answer 1

我认为，您的项目是单页应用，您使用<app-route> / <iron-pages>或类似的路由。这样浏览器实际上使用单个真实文档，然后对其进行操作以实现＆＃34;页面＆＃34;和导航。

由于技术限制，Vaadin组件的主题样式模块不会像您期望的那样动态。一旦主题和组件被加载和初始化，它们的样式就会在其相应组件的类中被记忆。

假设您加载＆＃34;第2页＆＃34;第一。加载后，<vaadin-text-field>会记住其样式，并且可以应用更多主题模块。这就是为什么当你导航到＆＃34; page1＆＃34;时，<vaadin-text-field>将继续使用＆＃34; page2＆＃34;中的memoized样式。

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

<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 combobox加载错误的自定义样式

1 个答案:

范围`:host()`选择器

自定义CSS属性

vaadin combobox加载错误的自定义样式

1 个答案:

范围:host()选择器

自定义CSS属性

范围`:host()`选择器