Shadow DOM polyfill occupies the css class that is equal to web component's name

[sorvell]

From @svastanesto on May 10, 2017 11:22

Let us say that we have a web component my-teaser <my-teaser></my-teaser>.
If the web component uses shadow DOM and when that shadow dom is being polyfilled, the polyfill implementation will occupy the class with that exact web component name .my-teaser and use it on all elements inside the shadow DOM. This causes an unpredictable results if we are already using that class in our web component styles.

For instance, we might have set that class css class name as an outer class on the html element inside our web component and that will reside in a shadow dom (ex. use it as a base class in our styles (.my-teaser), while using modifiers for versions of it (.my-teaser--special).
If some class has to be assigned for polyfill to work, shouldn't be a class name that we are unlikely to use in our styles. Or am I missing something?

Here is a demo of the problem - https://codepen.io/anon/pen/YVeYJR

---

Tested with
https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.11/webcomponents-lite.js
https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.11/custom-elements-es5-adapter.js

Copied from original issue: webcomponents/webcomponentsjs#780

[dfreedm]

Working codepen: https://codepen.io/anon/pen/qjLNmy

This will require a more advanced scoping name generation for elements.

[dnlzglr]

I think it might be a good idea to use a template name or identifier as style-scope class name rather that the element name. Besides the issue mentioned above, this would make it possible to polyfill custom elements that dynamically stamp one of multiple templates to their shadow dom.

The generated output of the aforementioned demo case might be something like the document sketched in https://codepen.io/anon/pen/GvJeBL.

This might be related to #115 as well.

[dfreedm]

Deduplicated against #134