Properties reverted to _initial_ value for some mixins cause issue with user-defined styles

[lpellegr]

I have created a web component using Polymer 2. Its code is transpiled to ES5 using the es5-bundled preset. The component is deployed on a CDN and imported on third-party pages that do not use Polymer.

Below is a usage example:

https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index1.html

There are 3 instances of the web component noticeable-widget. 2 of them are styled with a custom mixin definition.

One of the style is working, the one using selector .style1 . However, the 2 other instances are not displaying at all once the style is applied. If I remove the mixin definitions, then all instances display their default style as expected:

https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index2.html

Thanks to the help of dracco on Slack, it was noticed that ShadyCSS reverts some properties to initial CSS value because I use them in a different selector (.style1).

Here is the source code of the component if it can help:

https://gist.github.com/lpellegr/05530b6638f0f1eb0a710f7e86dc584b

It would be really nice to have at least a confirmation whether this is a bug with ShadyCSS or not.

[lpellegr]

@azakus @sorvell @petrkrulis Any ideas?

[TimvdLippe]

@lpellegr could you supply a minimal reproduction case on JSBin? The gist you linked contains a lot of other (seemingly) unrelated code.