IntersectionObserver 不拦截具有显示内容的元素

Question

看起来 IntersectionObserver 从不考虑display: contents视口中的元素。

这种行为对于 来说是有道理的display: none，但我发现它对于 来说是违反直觉的display: contents。

拥有一个干净的包装器的用例，仅在视口交集上获取和渲染其内容对我来说似乎是有效的。

例子

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.getElementById('content').style.display = 'block';
      document.getElementById('loader').style.display = 'none';
    }
  });
};

const observer = new IntersectionObserver(callback);

const target = document.getElementById('wrapper');

observer.observe(target);

#wrapper {
  display: contents;
}

#content {
  display: none;
}

<div id="wrapper">
  <div id="loader">Loading...</div>
  <div id="content">Shown on viewport intersection</div>
</div>

查看Mozilla 文档我可以看到：

这些元素本身不会产生特定的盒子

但我仍然希望IntersectionObserver能够检测到它。

所以猜测这是一个由两部分组成的问题：

• 这确实是预期的行为还是不需要的副作用？
• 如果这是预期的行为 - 正确的用例是什么display-contents？