Angular的cdk-virtual-scroll-viewport调用getBoundingClientRect返回0原因咨询

display: contents的核心特性是会让元素自身不生成任何CSS渲染盒，该元素本身会被渲染树忽略，它的所有子元素会直接提升到和该元素同级的渲染层级，继承该元素父节点的布局上下文。
注：你代码里写的display: content是拼写错误，正确属性值为display: contents，不过即使拼写正确也会出现返回全0的问题，核心原因如上。
因为该元素本身没有对应的渲染盒，没有实际的尺寸和占位，调用getBoundingClientRect()获取元素的 bounding box 时，自然会返回宽高、位置均为0的空DOMRect，这是符合CSS标准的预期行为。

你通过给cdk-virtual-scroll-viewport设置display: contents解决展开状态丢失的问题，本质是破坏了 CDK 虚拟滚动的核心运行逻辑：
CDK 虚拟滚动依赖viewport元素的真实尺寸计算可见区间、回收不可见区域的行DOM，你把viewport的渲染盒消除后，虚拟滚动的DOM回收机制直接失效，相当于变相禁用了虚拟滚动的性能优化能力，虽然临时保住了行的展开状态，但会引发包括定位异常、大列表下性能下降等一系列衍生问题。

不需要修改viewport的原生样式，你只需要调整展开状态的存储位置即可：

• 把所有行的展开状态抽离到组件的外部状态中存储，比如用Map<行唯一ID, boolean>的结构，不要把展开状态存在行组件的内部状态里
• 行组件渲染时，直接根据当前行的ID从外部状态读取对应的展开值，控制展开区域的显隐
• 点击「..more」时只修改外部状态里对应ID的布尔值即可

这种方案下，即使虚拟滚动回收了行DOM，滚动回对应位置重新渲染行时，依然可以从外部状态读到正确的展开状态，不会出现自动收起的问题，同时也不会破坏viewport的原生属性，弹窗的定位计算也会恢复正常。

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