代码：https://jsfiddle.net/q157xktz/1/
当此自定义元素的位置设置为相对时，偏移将正确显示。例如，如果真实偏移为0，则显示为25。这是为什么？有问题的元素是root-class-bubble
这是因为默认情况下，您的浏览器将每个未知元素呈现为inline元素。所有已知的HTML元素均具有用户代理设置的默认样式。自定义元素根本没有用户代理提供的任何样式，因此您必须显式设置所创建的每个元素的样式。因此，例如，在display: block元素的样式中添加root-class-bubble将解决偏移值。
并解释偏移值为何不同的原因是我引用了this article from MDN，这说明了offset属性如何随元素类型的不同而不同。从block-level元素开始。
对于块级元素，offsetTop，offsetLeft，offsetWidth和offsetHeight描述相对于offsetParent的元素的边框。
以及内联级元素：
但是，对于可以从一行换行到下一行的行内元素（例如跨度），offsetTop和offsetLeft描述了第一个边框的位置（使用Element.getClientRects（）获取其宽度和高度），而offsetWidth和offsetHeight描述边界框的尺寸。因此，具有offsetLeft，offsetTop，offsetWidth和offsetHeight的left，top，width和height的框将不会是具有环绕文本的范围的边界框。