DOM Helpers Utils not working inside Shadow DOM

[yogeshpacheria]

Dom Helpers does not seem to working properly inside Web Component shadow dom. I am trying to use offset method to get the offset of an element.

const divElem = document.createElement("div");
    divElem.id = "right-toolbar-text";
    divElem.style.position = "relative";
    divElem.style.top = "100px";
    divElem.textContent = this.getAttribute("text");

    const shadowRoot = this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    shadowRoot.appendChild(divElem);

    const style = getComputedStyle(
      this.shadowRoot.getElementById("right-toolbar-text")
    );
    console.log(style.top); // returns 100px
    const domHelperStyle = domHelpers.offset(
      this.shadowRoot.getElementById("right-toolbar-text")
    );
    console.log(domHelperStyle); // return object with all values as zero

Ideally it should return top: 100px but it is returning

{
top: 0,
left: 0,
height: 0,
width: 0
}

However, getComputedStyle returns correct position values.

I have create a codepen here for this scenario https://codepen.io/yamraaaj/pen/BaZdPKm. I suspect other utils might not be working inside Shadow DOM as well.

[marcospont]

I have noticed the same issue a while ago.

It seems to happen because the owner document of a node inside a document fragment is the external document. And within the offset helper code, if the node is not contained in its owner document, the calculation returns an object will all zeroes.

Any possibility for this to be fixed?