polyfills icon indicating copy to clipboard operation
polyfills copied to clipboard

style-scope should not use component name as class

Open cdrini opened this issue 2 years ago • 2 comments

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.

cdrini avatar Oct 04 '21 22:10 cdrini