Web 组件的可用高度和宽度？答案

【问题标题】：Available height and width for a web component?Web 组件的可用高度和宽度？
【发布时间】：2020-02-15 01:10:20
【问题描述】：

我正在编写一个 Web 组件，当用户将其放到他们的网页上时，我需要知道它的可用高度和宽度。 Web 组件将所有内容包装在 Shadow DOM 中，并且至少在高度方向包括潜在的可滚动部分。除此之外，它还包括 <details><summary>... 之类的内容。

我正在为此寻找策略。在这种情况下，“可用高度和宽度”可能没有很好地定义。

对我可以使用什么有什么建议吗？有什么建议可以澄清我的问题吗？

【问题讨论】：

我很确定您想要的是容器查询。它们实际上还不存在。否则你会做很多 JavaScript
@evolutionxbox 谢谢，是的，这可能就是我想要的。但即使有这样的查询，问题也出奇地复杂。我正在考虑不同的方法来给用户一些简单的提示（因为我不希望他们理解复杂性）。一种方法是为用户添加data-height-hint=* 并根据用户提供的值采取行动。但我不确定。
你想解决什么问题？
@evolutionxbox 在这种特殊情况下的主要问题是保持（可能是可滚动的）文本可见。这是因为图像/视频也需要（可能）可见。这个案例中的 web 组件中的顶级子元素的数量并没有那么大，所以我可能可以毫不费力地处理 JavaScript 中的复杂性，但是与周围 HTML 元素的接口仍然不容易掌握。
我很难想象你的意思。您介意在问题中添加minimal reproducible example 吗？一个证明问题的？

【解决方案1】：

很抱歉，老实说，您的描述令人困惑。如果您不提供图像或编码示例，人们将很难提供帮助。

话虽如此，我感觉您正在尝试解决一个不应该由 Web 组件实现而应该由用户解决的问题。例如，如果您需要组件具有最小高度以显示图像和详细信息，然后给它一个min-height（可能根据数据动态设置）并且应该由用户来使用它正确（即放在有足够空间的地方）。

或者，如果您希望组件以某种方式响应，我认为您可以使用ResizeObserver API，它可以让您观察组件宽度和高度的变化。请注意，它目前在 Safari 或 IE 中不可用。如果您需要支持这些，则需要像 this one 这样的 polyfill。

【讨论】：

谢谢，我在上面的评论中写道“想象一下一个有两个顶级元素子元素的 Web 组件。一个是图像。另一个是
元素（可能包含大量内容） ). "
感谢您的友好回答。是的，我正在使用 ResizeObserver。（我只对较新的浏览器感兴趣。）棘手的部分是
中的内容是未知的。我选择给 web 组件一个 max-height:100vh。这可能会让使用我的 Web 组件的作者和查看网页的用户都变得容易。