Skip to content

connectedCallback: cannot find slotted children with shadowDom: false #2819

@bbellmyers

Description

@bbellmyers

Stencil version:

 @stencil/core@2.4.0

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions