如何为Shadow DOM内的.bar元素设置样式（无法修改原代码）

当目标元素被移入Shadow DOM且无法添加part属性时，以下两种方法可以解决样式自定义问题：

方法一：通过用户脚本注入样式到Shadow Root #

这是最可靠的方案，利用用户脚本（如Tampermonkey、Violentmonkey）执行JavaScript，直接将样式插入目标Shadow DOM内部。

脚本示例 #

// ==UserScript==
// @name         自定义.foo内Shadow DOM的.bar样式
// @match        替换为目标网站的URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听DOM变化，确保.foo元素及其Shadow Root加载完成
    const observer = new MutationObserver(() => {
        const fooEl = document.querySelector('.foo');
        if (fooEl?.shadowRoot) {
            const shadowRoot = fooEl.shadowRoot;
            // 避免重复注入样式
            if (!shadowRoot.querySelector('#custom-bar-style')) {
                const style = document.createElement('style');
                style.id = 'custom-bar-style';
                style.textContent = `
                    .bar {
                        /* 这里写入你的自定义样式 */
                        background-color: #ff4444;
                        padding: 8px;
                        color: white;
                    }
                `;
                shadowRoot.appendChild(style);
            }
            observer.disconnect();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

注意：此方法仅适用于open模式的Shadow DOM（绝大多数公开应用使用此模式），如果是closed模式，无法直接访问Shadow Root，该方法无效。

方法二：利用CSS变量间接修改（依赖应用实现） #

如果Shadow DOM内的.bar元素样式使用了继承的CSS变量，可通过给外部的.foo设置变量值来间接修改样式。

示例代码 #

/* 全局样式中添加 */
.foo {
    --bar-background: #ff4444;
    --bar-text-color: white;
}

若Shadow DOM内的.bar样式定义为：

.bar {
    background-color: var(--bar-background, #默认颜色);
    color: var(--bar-text-color, #默认颜色);
}

则上述全局样式会生效。但此方法依赖应用的样式实现，通用性较低。

总结 #

优先选择方法一，它不依赖应用内部实现，能直接控制Shadow DOM内的元素样式，完全满足仅对.foo内的.bar设置样式的需求。

内容的提问来源于stack exchange，提问作者Fla