Skip to content

bbellmyers/test-connectedCallback

Repository files navigation

Built With Stencil

connectedCallback cannot find slotted children

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.

setup

  • npm install

To reproduce

  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 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>"

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors