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

Created on 29 Jun 2018 · 3Comments · Source: Polymer/lit-element

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.