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

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

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

关于我可以使用什么的任何建议？有什么建议可以澄清我的问题吗？

标签： javascriptcssweb-componentshadow-dom

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

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

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