search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.49k stars 289 forks source link

Custom element is never :defined so tool-palette is transparent #211

Open andria-dev opened 5 years ago

andria-dev commented 5 years ago

When using VisBug on my create-react-app project I was unable to see the tool palette. Upon inspecting the tool-palette web component, I noticed the css :not(:defined) { opacity: 0; } in the chrome dev tools. Maybe using an attribute that is removed on creation would be some kind of workaround.

This issue is also present on the same site built using Polymer at https://chrisbrown.netlify.com/ so it most likely isn't framework related. I can't figure out what would even be able to cause an issue like this. Here is the repo I'm currently working on: https://github.com/ChrisBrownie55/chrisbrown.netlify.com/

For now, I'm able to inspect the tool-palette and disable the problematic css to continue to use this tool on my sites.

argyleink commented 5 years ago

very interesting, thanks for reporting! appears CRA comes with some styles that set undefined web components to opacity 0... very odd/interesting default set of styles.. lol also what's interesting, is that the web component is most certainly working and defined, but the selector is matching the node regardless. i have a hunch this is related to the webcomponent polyfill i have to ship? hmmmm! thanks for logging this!