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

Question

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

Answer 1

我假设您使用的是LitElement，它使用可构造样式表。它们应该是可编辑的，但由于 Chrome 中的错误，它们目前还不能编辑。

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

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

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

注意:随着 Chrome 84 的发布，可能不再需要此解决方法(下一版本应于 2020 年 7 月/8 月发布)

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