The offsetParent of an assigned element in the shadowRoot is apparently incorrect.
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: pawel, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
Steps to reproduce:
See the code below. Open it in Firefox as well as in Chrome.
<html>
<body>
<test-offsetparent><div></div></test-offsetparent>
<script>
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
border: 1px solid;
display: inline-grid;
grid-template-columns: auto auto;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#offset {
height: 100px;
width: 37px;
}
#window {
height: 100px;
overflow-x: hidden;
position: relative;
width: 100px;
}
slot {
display: flex;
left: 0;
position: absolute;
top: 0;
}
::slotted(div) {
height: 100px;
width: 100px;
background-color: green;
}
</style>
<div id="offset"></div>
<div id="window"><slot></slot></div>
`;
class TestOffsetParent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
let elements = this.shadowRoot.querySelector("slot");
console.log(elements.assignedElements()[0].offsetParent);
elements.style.left = -elements.assignedElements()[0].offsetLeft;
}
}
customElements.define('test-offsetparent', TestOffsetParent);
</script>
</body>
</html>
Actual results:
In Firefox you see only part of the green square. In Chrome you see the entire green square.
Expected results:
I would expect to see that the entire 100px by 100px square, as it is in Chrome. After studying the issue, I found that the offsetParent of an assigned element is not the slot but the parent in the real DOM, in this case, test-offsetparent. In Chrome, the parent is the slot. While I can see the arguments for both sides, since I am accessing the assigned element through this.shadowRoot.querySelector("slot").assignedElements(), that is, essentially through the shadowRoot, I would expect the parent to be the slot.
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
Comment 2•4 years ago
|
||
This is a chrome bug, see https://github.com/w3c/csswg-drafts/issues/159. WebKit behaves like Firefox. https://bugs.chromium.org/p/chromium/issues/detail?id=920069 tracks fixing this in Chrome.
Description
•