You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
<dom-moduleid="my-element"><template><custom-style><styleis="custom-style">
paper-input {
--paper-input-container-underline-focus: {
border-color: red;
random: value;
};
}
</style></custom-style><paper-inputlabel="paper-input in my-element with red underline focus"></paper-input></template><script>window.addEventListener('WebComponentsReady',e=>{classMyElementextendsPolymer.Element{staticgetis(){return"my-element";}}customElements.define(MyElement.is,MyElement);});</script></dom-module><paper-inputlabel="paper-input with blue underline focus"></paper-input><my-element></my-element><divid="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:
<paper-input>
<my-element>
<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
The text was updated successfully, but these errors were encountered:
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.
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: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:
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
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:
<paper-input>
<my-element>
<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
Versions
The text was updated successfully, but these errors were encountered: