Dialogflow ES聊天组件火狐高度定制失效，求跨浏览器兼容方案

你遇到的核心问题是Firefox不支持adoptedStyleSheets API，这也是为什么你的样式只在Chrome和Edge生效。不过我们可以用更通用的方式来给Shadow DOM注入样式——直接创建<style>元素并插入到对应的Shadow Root中，这个方法兼容所有支持Shadow DOM的浏览器（包括Firefox）。

修改后的完整代码 #

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
    window.addEventListener('dfMessengerLoaded', function (event) {
        const $r1 = document.querySelector("df-messenger");
        const $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
        const $r5 = $r2.shadowRoot.querySelector("df-message-list");

        // 定制聊天窗口的高度和宽度
        const chatStyle = document.createElement('style');
        chatStyle.textContent = `div.chat-wrapper[opened="true"] { height: 420px; width: 300px; }`;
        $r2.shadowRoot.appendChild(chatStyle);

        // 定制消息的边距和字体大小
        const messageStyle = document.createElement('style');
        messageStyle.textContent = `#messageList .message {font-size:0.9em !important;} #messageList .message.bot-message {margin-right: 20px ;} #messageList .message.user-message {margin-left: 20px; margin-top: 15px; margin-bottom: 6px;} .message-list-wrapper.minimized #messageList {margin-right: -15px;} .message-list-wrapper.minimized #dismissIcon {padding: 1px}`;
        $r5.shadowRoot.appendChild(messageStyle);

        // 定制聊天图标大小
        const iconStyle = document.createElement('style');
        iconStyle.textContent = `button#widgetIcon .df-chat-icon {height: 56px; width: 56px; left: 0px; top:0px;}`;
        $r1.shadowRoot.appendChild(iconStyle);
    });
});
</script>

为什么这个方案可行？ #

直接向Shadow Root中插入<style>元素是Shadow DOM的标准用法，所有主流浏览器（Chrome、Edge、Firefox）都支持这种方式，不像adoptedStyleSheets存在兼容性缺口。它的效果和你之前用adoptedStyleSheets实现的完全一致，只是换了一种更通用的注入方式。

你可以在各个浏览器中测试这个修改后的代码，应该能看到样式在所有目标浏览器中都正常生效了。

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