css mixin values being copied out of scope to dynamically created paper-input.

[lycandroid]

Description

This may be just another example of leaking css mixins which have been reported elsewhere. My particular problem is with <paper-input> but I think the problem is more general.

If you have a child element which uses, for example, the --paper-input-container-underline-focus css mixin, then the values in that mixin are supplied to other paper-input's in the parent document but with "empty" values when a paper-input is created dynamically "later" (meaning via a setTimeout or via a server fetch etc...).

In the supplied glitch demo - in the <my-element> css it includes:

    <custom-style>
      <style is="custom-style">
        paper-input {
          --paper-input-container-underline-focus: {
            border-color: red;
            random: value;
          };
        }
      </style>
    </custom-style>

Note, the use of both a valid css property border-color, as well as an arbitrary one "random".

For the dynamically added element, these properties appear invalidly against the focus underline element as:

    border-color: var(--paper-input-container-underline-focus_-_border-color);
    random: var(--paper-input-container-underline-focus_-_random);

however their values are empty and the border-color causes the visual issue of the underline not being blue.

my-element simply needs to declare the --paper-input-container-underline-focus with any css selector valid or invalid and the problem occurs. my-element does not even need to include a <paper-input-container> element at all for the problem to occur. The example shows a real <paper-input-container> just for clarity.

Problem appears to only affect chrome. Replicated in chrome v78.0.3904.70.

Live Demo

https://glitch.com/~navy-poppyseed

Steps to Reproduce

<dom-module id="my-element">
  <template>
    <custom-style>
      <style is="custom-style">
        paper-input {
          --paper-input-container-underline-focus: {
            border-color: red;
            random: value;
          };
        }
      </style>
    </custom-style>

    <paper-input label="paper-input in my-element with red underline focus"></paper-input>

  </template>

  <script>window.addEventListener('WebComponentsReady', e => {
  class MyElement extends Polymer.Element {
    static get is() {
      return "my-element";
    }

  }

  customElements.define(MyElement.is, MyElement);
});</script>
</dom-module>

<paper-input label="paper-input with blue underline focus"></paper-input>

<my-element></my-element>

<div id="content"></div>

<script>setTimeout(() => {
  document.querySelector("#content").innerHTML = `<paper-input></paper-input>`;
}, 0);</script>

In the html and the glitch demo a standard <my-element> is defined which declares a --paper-input-container-underline-focus mixin.

The main document then shows:

1. <paper-input>
2. <my-element>
3. <paper-input> which is added to the main document "later" via a setTimeout.

Element 1 shows a blue focus underline. Element 2 shows a red focus underline. Element 3 shows a black focus underline in error.

Expected Results

Element 1 shows a blue focus underline. Element 2 shows a red focus underline. Element 3 shows a blue focus underline.

Actual Results

Element 1 shows a blue focus underline. Element 2 shows a red focus underline. Element 3 shows a black focus underline.

Browsers Affected

• [ x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

• Polymer: v2.8.0
• webcomponents: v2.2.10

[lycandroid]

Anyone? Bit of a fundamental issue this one.

[lycandroid]

Is anyone still working on polymer?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lycandroid]

Thank you polymer team. It's been a pleasure.