javascript - Web 组件的可用高度和宽度？

Question

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

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

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

Answer 1

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

话虽这么说，我有一种感觉，你正在尝试解决一个不应该由网络组件实现来完成的问题，而应该由用户来解决。例如，如果您需要组件具有最小高度以显示图像和详细信息，则给它一个 min-height (可能会根据数据动态设置)，它应该是由用户正确使用它(即放置在有足够空间的地方)。

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