只有在使用本机CSS属性时，分配mixin才会渗出

我们遇到一个问题，在选择器中设置mixin似乎行为不端：该值似乎“流血”到与CSS选择器不匹配的其他元素 .

更令人费解的是，这似乎只能通过使用自定义CSS属性来实现 .

我们重新创建了一个简单的小型存储库，显示了这个问题：https://github.com/tegola/polymer-apply-bug-testcase（对不起，在CDN上发生这种情况真是太痛苦了） .

短篇小说： <paper-input> 可通过更改mixin --paper-input-container-input 进行配置 . 所以，在 my-app.html 中，我们这样做：

/* Add borders and padding, and reduce margin to underline */
    --paper-input-container-input: {
      box-sizing: border-box;
      border: 1px solid var(--paper-grey-400);
      border-bottom: 0;
      padding: 0.5rem;
    };

这应该将mixin设置在 <my-app> 元素的范围内 . my-app.html 有一个PSK-ish：

<my-view1 name="view1"></my-view1>

输入 my-view.html . HTML方面，它只有两个元素：

<paper-input label="Normal input"></paper-input>

<paper-dropdown-menu label="Normal dropdown">
  <paper-listbox class="dropdown-content">
    <paper-item>Item 1</paper-item>
    <paper-item>Item 2</paper-item>
    <paper-item>Item 3</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

可以通过设置mixin --paper-input-container-input 来配置第一个 <paper-input> ，如ANY <paper-input> . 但是， <paper-dropdown-menu> ALSO内部包含 <paper-input> 元素 . 我希望 <paper-input> 元素看起来有点不同 . 所以，我在 my-view1.html 的CSS部分写这个：

/* Input borders in dropdown menus */
  paper-dropdown-menu {
    --paper-input-container-input: {
      box-sizing: border-box;
      padding: 0.5rem;
      border: 1px solid var(--paper-grey-400);
      border-bottom: 0;
      border-right: 0; /* This bleeds out */
      background-color: rgba(255, 0, 0, 0.25); /* This does not */
    };
  }

这应该（我希望我是对的）按照指定设置mixin --paper-input-container-input 的值，但仅适用于与选择器 paper-dropdown-menu 匹配的元素 . 所以，第一个 <paper-input> 应该不受影响 .

但是：

• 使用自定义CSS元素polyfill，它工作正常：普通输入有其边框 .

• 将 useNativeCSSProperties 设置为true将显示右侧缺少边框的直接纸张输入

• 问题似乎只存在于边界 . 红色透明背景仅发生在 <paper-dropdown-menu> （如您所料）

• <paper-dropdown-menu> 在 paper-dropdown-menu-shared-styles.html 中定义了mixin --paper-input-container-input ，如下所示：

码

--paper-input-container-input: {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      box-sizing: border-box;
      cursor: pointer;
    };

我不确定这是否相关 . 我以为我会添加它 .

这是本机CSS属性的本机实现中的错误吗？或者我在做些傻事？

使用本机CSS属性时，Safari具有相同的问题 .

在Polymer中打开问题：https://github.com/Polymer/polymer/issues/4254