如何解决构造样式-如何通过Chrome扩展程序JS / CSS进行更改
我有一个网页，这是第三个供应商应用程序。在此页面中，有许多代码创建一些构造样式。我想创建一个chrome扩展程序来在页面中移动一个div。我尝试注入JS和CSS，但仅适用于普通样式，不能一次构造。我该怎么做才能更改可构造样式表，例如阴影DOM中div的“ width”值？
更新：replace将按照下面的评论进行操作，但是如何找到阴影对象现在是一个问题
<!DOCTYPE html>
<html>
<body>
<script>
body = document.querySelector("body");
const shadow = body.attachShadow( {mode: 'open'});
shadow.innerHTML = "<p>New2</p>";
const bgPurple = new CSSStyleSheet();
const everythingTomato = new CSSStyleSheet();
bgPurple.replace(`p {font-weight: bold; }`);
everythingTomato.replace(`* { color: tomato; }`);
shadow.adoptedStyleSheets = [everythingTomato,bgPurple];
</script>
<script>
const everythingTomato2 = new CSSStyleSheet();
everythingTomato2.replace(`* { color: red; }`);
shadow.adoptedStyleSheets = [everythingTomato2];
/*How to find "shadow" to use adoptedStyleSheets? The first code is given not clear,I can only change this one. */
</script>
</body>
</html>
解决方法
可构造的样式表：https://developers.google.com/web/updates/2019/02/constructable-stylesheets
我不确定100％（没有做太多事情，它们现在只能在Chrome中使用），但我认为您只能在它们上使用replace和replaceSync。
您的代码运行良好；您在全局范围内声明了shadow。如果没有，document.body.shadowRoot将为您提供引用（不需要对诸如body，head这样的HTML元素使用querySelector），因为attachShadow都设置并返回(this.)shadowRoot
您可以链接所有内容：
super()
.attachShadow({mode:"open"})
.innerHTML="Hello Component"
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。