Почему все CSS моего пользовательского элемента отображаются в виде таблицы стилей пользовательского агента в Chrome dev-tools?

Question

Когда я проверяю свои пользовательские элементы в Chrome, стили элемента и всех внутренних элементов отображаются как «таблица стилей пользовательского агента» на панели «Стили».

Answer 1

Я предполагаю, что вы используете LitElement, который использует constructible stylesheets. Они должны быть доступны для редактирования, но из-за ошибки в Chrome на данный момент их нет.

В настоящее время, вероятно, лучше отключить его во время разработки. Вы можете сделать это, добавив это перед загрузкой любого кода LitElement.

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

Обязательно НЕ используйте этот код на производственном сайте.

Примечание: этот обходной путь, вероятно, не понадобится с выпуском Chrome 75 (следующая версия должна быть доступна примерно через 6 недель)