为什么我的自定义元素的所有 css 在 Chrome 开发工具中都显示为用户代理样式表？

Question

当我在 Chrome 中检查我的自定义元素时，元素的样式和所有内部元素在样式面板中显示为“用户代理样式表”。

Answer 1

我假设您正在使用LitElementwhich uses constructible stylesheets. 它们应该是可编辑的，但由于 Chrome 中的错误，它们目前不是。

目前，最好在开发时禁用它。您可以通过在加载任何 LitElement 代码之前添加它来实现。

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

确保不要在生产站点上使用该代码。

注意：Chrome 84 的发布可能不需要此解决方法（下一个版本应于 2020 年 7 月/ 8 月推出）

您可以在此处关注具体问题：https : //bugs.chromium.org/p/chromium/issues/detail?id=946975