stencil icon indicating copy to clipboard operation
stencil copied to clipboard

connectedCallback: cannot find slotted children with shadowDom: false

Open bbellmyers opened this issue 4 years ago • 0 comments

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: In a dev build, an Element in connectedCallback finds its slotted children just fine, using querySelector. However, in a prod build, slotted children cannot be found.

This occurs only for components with shadowDom: false, with children passed from a parent's slot, to a child's.

For a component my-component which searches for its slotted children, it finds them in componentWillLoad consistently, however slotted children passed from a parent slot are not found by connectedCallback in a prod build.

Expected behavior: querySelector should always find slotted children in connectedCallback.

Steps to reproduce: See https://github.com/bbellmyers/test-connectedCallback to demonstrate this issue

  1. Run npm start, observe the javascript console. The same information is gathered for a single level slot with my-component, and for the same component which is written out by a parent component via a slot.
connected callback
child: "<span>Written by Parent</span>"
html: "<my-component><!---->Before slot | <span>Written by Parent</span> | After slot</my-component>"

will load
child: "<span>Written by Parent</span>"
html: "<my-component><!---->Before slot | <span>Written by Parent</span> | After slot</my-component>"
  1. Run npm serve, observe the javasdript console again. This npm script runs a prod build and serves the dist directory via the serve package. Note that while the single level component is the same, connectedCallback now cannot find its slotted child, while componentWillLoad still can.
connected callback
child: undefined
html: "<my-component><!---->Before slot |  | After slot</my-component>"

will load
child: "<span>Written by Parent</span>"
html: "<my-component><!---->Before slot | <span>Written by Parent</span> | After slot</my-component>"

bbellmyers avatar Feb 07 '21 23:02 bbellmyers