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.
npm install
- 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 agian. 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>"