Search code examples
javascriptgoogle-chromegoogle-chrome-devtoolsweb-componentcustom-element

Why all css of my custom-element are shown as user agent stylesheet in Chrome dev-tools?

When I inspect my custom-elements in Chrome the styles of the element and all internal elements are shown as 'user agent stylesheet' in the Styles panel.

Styles panel screenshot

Solution

  • I am assuming you are using LitElement which uses constructible stylesheets. They should be editable but due to a bug in Chrome they are currently not.

    For the time being, it's probably best to disable it while developing. You can do so by adding this before you are loading any LitElement code.

    <script>
  delete Document.prototype.adoptedStyleSheets;
</script>

    Be sure to NOT use that code on a production site.

    Note: this workaround will probably not be needed with the release of chrome 84 (next version which should be available July/August 2020)

    You can follow the specific issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=946975