Open lycandroid opened 4 years ago
Anyone? Bit of a fundamental issue this one.
Is anyone still working on polymer?
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.
Thank you polymer team. It's been a pleasure.
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