search

webcomponents / polyfills

Web Components Polyfills
BSD 3-Clause "New" or "Revised" License
1.13k stars 166 forks source link

style-scope should not use component name as class #477

Open cdrini opened 2 years ago

cdrini commented 2 years ago

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: image

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 commented 2 years ago

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

stale[bot] commented 1 year ago

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.