Issues with Polymer Template

Hi,

I am using the latest V14. I wrote a polymer template which looks like:

<div id="content"></div>
<slot name="slotcontent"></slot>
<div>
	<template is="dom-if" if="[[isAuthenticated]
]">
		<custom-element id="customElement"></custom-element>
	</template>
</div>
....

connectedCallback() {
	super.connectedCallback();
	this.shadowRoot.querySelector( "#customElement" ).start();
}

If my server side implementation took @Id way to inject contents, that shadowRoot query could run well. However, if I use slot way to inject my contents, that shadowRoot query woudl failed with error message saying that “#customElement” is null. Please kindly advise what went wrong?

Many thanks,
Joey

Hi Joey. When you slot the element, you should try to find it with a querySelector without the shadowRoot. Or you need to find the slot element first and then do another query to search its children.

Thanks a lot.