-
Notifications
You must be signed in to change notification settings - Fork 165
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
style-scope should not use component name as class #477
Labels
Comments
cdrini
added
Focus Area: Standards & Polyfills
Type: Feature
New feature or request
labels
Oct 4, 2021
cdrini
added a commit
to cdrini/bookreader
that referenced
this issue
Oct 4, 2021
Seeing this as well and it causes several styles to break when the DOM is flattened. |
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
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 usingbr-mode-1up
as a class myself (I then renamed it tobr-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.The text was updated successfully, but these errors were encountered: