Issues with Polymer Template


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

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

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,

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.