Discrepancy in querying for light dom content #1059
Description
Description
This issue concerns to inconsistency in how light dom querying works when a component receives slot content from a parent component and it passes that content to its own child component.
So container sends slot content to parent and parent sends slot content to child.
In the native web components model, the slot content send by the container is only queryable in the light dom of the intermediate parent. The child components light dom queryselector returns null.
In LWC, the slot content is queryable both in the intermediate parent and the child.
Steps to Reproduce
c-nested-slot-container
<template>
<c-nested-slot>
<div class="manual">slot content</div>
</c-nested-slot>
</template>c-nested-slot
<template>
<c-child>
<slot>
</slot>
</c-child>
</template>import { LightningElement } from 'lwc';
export default class NestedSlot extends LightningElement {
renderedCallback() {
console.log('NestedSlot\'s rendered callback: Light dom querySelector()');
console.log(this.querySelector('div.manual')); // Will return div.manual in LWC, same behavior in WC
}
}c-child
<template>
<slot><div id="default" class="default"></div></slot>
</template>import { LightningElement } from 'lwc';
export default class Child extends LightningElement {
renderedCallback() {
console.log('Child\'s rendered callback: Light dom querySelector()');
console.log(this.querySelector('div.manual')); // Will return div.manual in LWC, returns null in WC
}
}LWC behavior: https://playground.lwcjs.org/projects/dO-PRqNg7/3/edit
WebComponents behavior: https://jsbin.com/parijoz/edit?html,js,output
Expected Results
Behavior consistent with WC
Browsers Affected
All
Version
0.35.7