CSS mixins are not applied correctly in some hierarchies of `LitELement`-based components

[YegorUdovchenko]

Description

The problem that we observe is that a CSS mixin applied to an element in a certain hierarchy of elements stops being applied correctly when a certain element is added outside of this hierarchy.

Here's a structure of elements where we can see this problem:

<element-1> (applies `--our-mixin` specified elsewhere) </element-1>
<element-2> 
  (defines `--our-mixin`) 
  <element-1> (applies `--our-mixin` specified elsewhere) </element-1>
</element-2>

The problem is that the presence of <element-1> as a sibling element of <element-2> prevents --our-mixin defined inside of <element-2> from being applied correctly in another instance of <element-1> nested inside of it. If we remove the top-most <element-1> declaration though, the --our-mixin defined in <element-2> starts to be applied correctly.

You can see it live here: https://stackblitz.com/edit/lit-element-css-mixin

The same structure of elements written with PolymerElement instead of LitElement as a base class doesn't have this problem.
See the identical Polymer version that works correctly here: https://stackblitz.com/edit/polymer-element-css-mixin

Live Demo

An example with LitElement base class (where this problem occurs):
https://stackblitz.com/edit/lit-element-css-mixin

The same example with PolymerElement base class (the mixin is applied as expected):
https://stackblitz.com/edit/polymer-element-css-mixin

Steps to Reproduce

Open https://stackblitz.com/edit/lit-element-css-mixin

Expected Results

The second square should have a red background due to the --our-mixin mixin definition found in the Element2 class (see the index.js file).

Actual Results

The red background is not applied to the second square as defined by the --our-mixin declaration in Element2.

As noted above, it starts working when the top-most element-1 declaration in index.html is removed or commented out, whereas it should not have any effect.

Browsers Affected

• Chrome
• Firefox
• Edge

Versions

• lit-element: v0.5.2
• webcomponents: v2.0.2

[sorvell]

Here's a version that shows this is still broke on the dev branch: http://jsbin.com/nuwotel/1/edit?html,output.

[sorvell]

Sorry for the delay on this, but it's finally fixed as shown here: https://stackblitz.com/edit/lit-element-css-mixin-hgtjfn?file=index.js.