Javascript 观察可构造样式表的变化

我有以下使用可构造样式表的代码片段。（单击按钮时，附加的可构造样式表将以随机颜色更新）

我如何观察和倾听这些变化？（我想捕获元素上的计算样式更改，或者-更新的可构造样式表）

var div1=document.getElementById（“div1”）；
var观察者=新的突变观察者（功能（突变）{
让文本=”；
突变。forEach（功能（突变）{
text+=“已更改”+mutation.attributeName；
});
document.getElementById（“输出”）.innerHTML+=`${text}`；
});
var observer配置={
属性：true
};
var targetNode=document.getElementById（“div1”）；
document.getElementById（“btnAttachStyleSheet”）.addEventListener（“单击”，（）=>{
开关（Math.floor（Math.random（）*5））{
案例1：
sheet.replaceSync（“.color{color:blue}”）；
打破
案例2：
sheet.replaceSync（“.color{color:yellow}”）；
打破
案例3：
sheet.replaceSync（“.color{color:green}”）；
打破
案例4：
sheet.replaceSync（“.color{color:brown}”）；
打破
违约：
sheet.replaceSync（“.color{color:pink}”）；
}
});
const sheet=新的CSSStyleSheet（）；
document.adoptedStyleSheets=[sheet]；
observer.observe（targetNode，observer配置）
采用的样式表
更新样式表
彩色div
突变：
的规范没有提到触发任何事件。这不是DOM突变，所以你不能用“突变观察者”来观察它

相反，如果您控制代码调用
replaceSync
，请调用自己的函数执行
replaceSync
，然后引发特定于代码的事件（类似地，对于
replace
）：


var div1=document.getElementById（“div1”）；
var targetNode=document.getElementById（“div1”）；
document.getElementById（“btnAttachStyleSheet”）.addEventListener（“单击”，（）=>{
开关（Math.floor（Math.random（）*5））{
案例1：
sheetReplaceSync（表“.color{color:blue}”）；
打破
案例2：
sheetReplaceSync（表“.color{color:yellow}”）；
打破
案例3：
sheetReplaceSync（表“.color{color:green}”）；
打破
案例4：
sheetReplaceSync（表“.color{color:brown}”）；
打破
违约：
sheetReplaceSync（表“.color{color:pink}”）；
}
});
const sheet=新的CSSStyleSheet（）；
函数sheetReplaceSync（工作表，…参数）{
const result=sheet.replaceSync（…args）；
log（“已更改！”）；
返回结果；
}
功能表替换（表，…参数）{
返回表。替换（…参数）。然后（结果=>{
log（“已更改！”）；
返回结果；
});
};
document.adoptedStyleSheets=[sheet]
采用的样式表
更新样式表
彩色div
突变：
我刚刚尝试在Firefox 78.4.1 esr上运行此功能，但没有运行。经过一点研究，我发现可构造的样式表只在ChomreV73以后的版本中受支持。其他浏览器尚未实现此规范。以下是浏览器支持的详细信息：。我只提到这一点，因为如果没有广泛的支持，你可以考虑其他的选择。