[速报] B 站正在灰度测试新版评论区，大量使用 Shadow DOM 技术和自定义元素

[Tinhone]

目前观察到

1. 只在视频页看到了这个调整
2. 引入了有动画的动态小电视表情包
3. 评论输入框展开动画消失
4. 首次加载评论区时添加了加载动画
5. 展开楼中楼评论时添加了加载动画，加载完成后的翻页栏加入了收起按钮
6. 简化评论区 又失效了
7. 自定义字体 也因为 Shadow DOM 失效了一半
8. 夜间模式 失效的地方很少，可喜可贺
9. 比之前版本的评论区流畅不少，感觉有优化
10. 某些地方 B 站目前写得有点 bug
11. 因为 querySelector 选不到某些元素了，所以评论区相关的组件都有可能失效

没找到便捷复制包括 Shadow DOM 的 HTML 的方法，于是用截长图代替了，下面截的是 bili-comment-thread-renderer 元素

HTML

原图高度 19903px，点击下方可展开查看，也可点击图片链接查看 https://github.com/the1812/Bilibili-Evolved/assets/81268244/622d01c2-4543-448c-b0c5-9234dabe13e8

点击展开

渲染结果

[Kal-tsit63]

工具上的几个评论区功能也全失效了
禁用评论区搜索词
评论区IP属地显示
复制动态链接

[GalaxySnail]

有一个第三方的“移除评论区蓝字搜索词”的脚本已经更新适配：https://greasyfork.org/scripts/447612/diff?v1=1406026&v2=1075765

[festoney8]

09.04 下方代码已失效

目前 B 站番剧页、空间页是旧版评论区，动态页、播放页是 shadow dom 评论区

---

想尝鲜的用户，或想做适配的开发者，可以用下方脚本假装灰测体验 Shadow DOM 版评论区

灰测中的用户将代码中 ELEMENTS 改为 DEFAULT 就可以禁用灰测

// ==UserScript==
// @name         抢先体验 B 站 Shadow DOM 新评论区
// @namespace    http://tampermonkey.net/
// @version      2024-07-07
// @description  抢先体验 B 站 Shadow DOM 新评论区
// @author       You
// @match        https://www.bilibili.com/video/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    "use strict";
    let origValue = window.__INITIAL_STATE__;
    if (origValue?.abtest) {
        origValue.abtest.comment_next_version = "ELEMENTS";
    }
    Object.defineProperty(window, "__INITIAL_STATE__", {
        get() {
            return origValue;
        },
        set(value) {
            if (value.abtest) {
                value.abtest.comment_next_version = "ELEMENTS";
            }
            origValue = value;
        }
    });
})();

[snowman]

想尝鲜的用户，或想做适配的开发者，可以用下方脚本假装灰测体验 Shadow DOM 版评论区

灰测中的用户将代码中 ELEMENTS 改为 DEFAULT 就可以禁用灰测

2024-09-04 20:24:57 已经失效

[festoney8]

7月13日，基本放量铺开了，未登录用户默认也给新版模式

---

踩坑记录

• 现在这套基于 lit 的新评论区，基本上是 Shadow DOM 套娃，套了四五层，外部样式全寄，第三方插件极度不友好，想适配的各位开发者各显神通吧（

• 评论区外部 MutationObserver 监听不到内部变化，只有在 Shadow DOM 内的 MutationObserver 可以监听内部变化，但 B 站套娃多层，故 MutationObserver 没那么好用了

• 由于使用了 lit 框架，主评论和回复的属性会挂在自定义元素的 __data 上，比如 bili-comment-reply-renderer 和 bili-comment-renderer 节点的 __data 都记录了该评论全部信息，包含 IP 属地，对第三方脚本来说很有用

• 某些节点有 light 属性，自定义元素上有一个 __theme 的属性，可能官方以后想做暗色亮色主题

• 目前评论区头像有时忽大忽小，笔记图片偶尔抽风，评论右侧举报菜单点开后必须 hover 才能关掉，这些都是官方 bug 与插件无关，等着官方修吧

[sinsong]

目前是 #shadow-root (open)，那么暂时可以通过 shadowRoot 访问影子 dom ¹。

就像这样：

document.querySelector('bili-comments').shadowRoot.querySelector('bili-comment-thread-renderer')

或者随便找到个库好像可以穿透 shadow dom：https://github.com/webdriverio/query-selector-shadow-dom 。

但是要是哪天 #shadow-root (closed) 了咋办（悲

Footnotes

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow#mode_%E6%A8%A1%E5%BC%8F ↩

[festoney8]

B 站自己也在用 shadowRoot.querySelector，目前 closed 的概率不大

[WakelessSloth56]

重载 attachShadow 方法应该可以解决。

Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
    return this._attachShadow({ mode: "open" });
};

[wwwymq]

我今天才发现，之前用ublock屏蔽关键词失效了，而且处于无法选中的状态。

// ==UserScript==
// @name         进一步优化的 B 站评论处理脚本
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  查找所有<bili-comment-thread-renderer>标签，处理嵌套 shadow-root，删除包含指定关键字的标签并打印被屏蔽元素。
// @match        https://*.bilibili.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 可配置的关键字列表和开关变量
    const config = {
        targetKeywords: ["乐山", "一"],
        enabled: true
    };

    function processCommentRenderers(elements) {
        elements.forEach(renderer => {
            if (!config.enabled) return;
            let hasKeyword = false;
            function checkForKeyword(element) {
                const shadowRoot = element.shadowRoot;
                if (shadowRoot) {
                    const childElements = shadowRoot.querySelectorAll('*');
                    childElements.forEach(child => {
                        if (child.textContent) {
                            config.targetKeywords.forEach(keyword => {
                                if (child.textContent.includes(keyword)) {
                                    hasKeyword = true;
                                    console.log(`[BilibiliFilter] 被屏蔽的字符串：${child.textContent}`);
                                }
                            });
                        }
                        checkForKeyword(child);
                    });
                }
                if (element.textContent) {
                    config.targetKeywords.forEach(keyword => {
                        if (element.textContent.includes(keyword)) {
                            hasKeyword = true;
                            console.log(`[BilibiliFilter] 被屏蔽的字符串：${element.textContent}`);
                        }
                    });
                }
            }
            checkForKeyword(renderer);
            if (hasKeyword) {
                renderer.remove();
            }
        });
    }

    function processComments() {
        const startElement = document.querySelector('bili-comments');
        if (startElement && startElement.shadowRoot) {
            const allElements = startElement.shadowRoot.querySelectorAll('bili-comment-thread-renderer');
            processCommentRenderers(allElements);
        }
    }

    // 使用 MutationObserver 监听页面变化
    const observer = new MutationObserver(() => {
        if (config.enabled) {
            processComments();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // 定时调用处理函数
    setInterval(processComments, 2000);

    // 初始化时执行一次处理
    processComments();
})();

让豆包写了一个脚本去处理，目前勉强能用