style-scope should not use component name as class

[cdrini]

Description

style-scope should not use the component name as a class, because it is common for that class name to be already in use.

Motivation

Currently, style-scope code gets generated like this:

Note the br-mode-1up class added by the webcomponents polyfill to children elements to scope the styling. I was previously using br-mode-1up as a class myself (I then renamed it to br-mode-1up__root in the example above), and when used with the webcomponents polyfill bundle, it resulted in strange UI problems, with no errors being logged.

The polyfill should either generate a modified name (ie {componentName}__wcpf-style-scope), or use an auto-generated hash or something (this is what Vue does). Using the components name can cause very difficult to debug issues. It took me and two team-mates various debug sessions across a week to finally find the bug.

[jbuckner]

Seeing this as well and it causes several styles to break when the DOM is flattened.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.