调整Shopify 2.0聊天组件展开与收起高度问题求助

我尝试用CSS根据Shopify 2.0聊天组件的展开/收起状态调整位置，参考了社区和Shopify论坛的代码，但没达到预期效果。

所用代码如下：

#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
  bottom: 65px !important;
  right: 10px !important;
}

#shopify-chat > iframe[isOpen="true"], #shopify-chat {
  bottom: 0px !important;
}

遇到的问题：isOpen="true"的状态选择器完全没生效，收起状态下聊天组件仍部分移出屏幕，bottom:0px !important规则根本不起作用。（附展开状态截图：聊天组件展开时的完整显示效果）

问题分析与解决方法 #

1. 先查真实DOM状态
   别盲目套代码，用浏览器F12开发者工具，切换到聊天组件的展开/收起状态，看看到底是哪个元素上带了状态标识——Shopify的聊天组件大概率不会把isOpen作为HTML属性挂在iframe上，而是给外层的#shopify-chat容器加data属性（比如data-open="true"）或者类名（比如open）。

2. 修正CSS选择器

   • 如果是data属性控制状态：

     /* 默认收起状态 */
     #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
       bottom: 65px !important;
       right: 10px !important;
     }
     
     /* 展开状态（匹配容器的data属性） */
     #shopify-chat[data-open="true"] > iframe, #shopify-chat[data-open="true"] {
       bottom: 0px !important;
     }
     

   • 如果是类名控制状态：

     /* 默认收起状态 */
     #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
       bottom: 65px !important;
       right: 10px !important;
     }
     
     /* 展开状态（匹配容器的类名） */
     #shopify-chat.open > iframe, #shopify-chat.open {
       bottom: 0px !important;
     }
     

3. 优先级兜底方案
   如果还是被覆盖，就加选择器权重，比如把body加上：

body #shopify-chat[data-open="true"] > iframe, body #shopify-chat[data-open="true"] {
  bottom: 0px !important;
}

4. 特殊情况处理
   要是聊天组件用了Shadow DOM，普通CSS穿不透，那就去Shopify后台的聊天组件设置里找位置调整的原生选项，或者用Shopify提供的自定义样式API。

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