Question

我们遇到的问题是，在选择器中设置mixin似乎行为不端：价值似乎是＆＃34;流血＆＃34;与其他与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>来配置第一个<paper-input>，例如ANY --paper-input-container-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-input-container-input中定义了mixin paper-dropdown-menu-shared-styles.html，如此：

代码

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

中打开问题

只有在使用原生CSS属性

0 个答案: