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.
I can apply with success a custom CSS class if the style is defined inside custom-style. However, the 2 other instances are not displaying at all once the style is applied. If I remove the custom-style definition, then all instances display their default style properly:
https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index2.html
Any idea why this happens? how could I apply different styles to different instances of the same custom element? and how to keep default component styling to work when a CSS class is defined?
Also, if I do not put the style definition in custom-style, then the defined CSS classes have no effect on Chrome. Why? After reading the documentation, I understood custom-style is there for browsers not implementing Shadow DOM v1 but Chrome 61 is, right?
The issue seems to be related to a bug with shadycss: