当位置为“相对：[关闭]时，自定义元素返回不正确的偏移量

Question

代码：https://jsfiddle.net/q157xktz/1/

当此自定义元素的位置设置为相对时，偏移量会正确显示。例如，如果真正的偏移量为 0，则显示为 25。这是为什么呢？有问题的元素是root-class-bubble

Answer 1

这是因为默认情况下，您的浏览器会将每个未知元素呈现为 inline 元素。所有已知的 HTML 元素都有由 用户代理 设置的默认样式。自定义元素根本没有用户代理提供的任何样式，因此您必须明确设置您创建的每个元素的样式。例如，将display: block 添加到root-class-bubble 元素的样式中将解决偏移值。

为了解释为什么偏移值不同，我引用了this article from MDN，它解释了offset 属性如何因不同的元素类型而不同。从块级元素开始。

对于块级元素，offsetTop、offsetLeft、offsetWidth和offsetHeight描述了一个元素相对于offsetParent的边框。

并且带有内联元素：

但是，对于可以从一行换行到下一行的内联级元素（例如 span），offsetTop 和 offsetLeft 描述了第一个边框框的位置（使用 Element.getClientRects() 获取其宽度和高度） ，而 offsetWidth 和 offsetHeight 描述了边界框的尺寸。因此，left、top、width 和 height 为 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 的框将不会成为带有环绕文本的 span 的边界框。