Discrepancy in querying for light dom content

[ravijayaramappa]

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

[git2gus[bot]]

This repo has installed the Git2Gus application. If you want to know how it works navigate to https://lwc-gus-bot.herokuapp.com/#how-it-works

[diervo]

@reiniergs is this comment expected? ^^

[caridy]

This is definitely a bug. I think we got confused with retargeting, because you do see div.manual as a target of a click at any level, but if you query the light dom, it is always about the shadow that you belong to.

[reiniergs]

@diervo yes

[caridy]

@ravijayaramappa I think this is now fixed, but should be validated.

[ravijayaramappa]

@caridy Still see the issue in @lwc/engine v1.0.3