如何在#shadow-root（打开）上的 Tampermonkey 中使用 GM_addStyle？答案

【问题标题】：How to use GM_addStyle in Tampermonkey on #shadow-root (open)?如何在#shadow-root（打开）上的 Tampermonkey 中使用 GM_addStyle？
【发布时间】：2020-06-01 10:13:37
【问题描述】：

有一些扩展程序可以制作小的页面弹出窗口，在 Inspection in Chromium 中显示为 #shadow-root(open)。

我想使用 Tampermonkey 自定义其样式，但使用 GM_addStyle(".class_name{zoom: 166%;}"); 不起作用。它适用于原生元素。

例如扩展名： https://chrome.google.com/webstore/detail/fonetify-understand-lik-a/ieimachclakgpglmhafclnfklklomfeh

【问题讨论】：

使用 document.createElement 创建一个style 元素并将其附加到该元素的 shadowRoot。
您可以在此处查看示例：stackoverflow.com/questions/11668111/…

标签： tampermonkey

【解决方案1】：

您需要将样式标签插入到影子根中。

（从this answer 捏一些代码）

function addStyleToShadowRoot(shadowRoot,css) {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    shadowRoot.appendChild(style);
}

这样称呼它：

addStyleToShadowRoot(customElement.shadowRoot, myCss);

【讨论】：