connectedCallback: cannot find slotted children with shadowDom: false
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
- Run
npm start, observe the javascript console. The same information is gathered for a single level slot withmy-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>"
- 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>"