Using component templates inside a shadow DOM

[lsmenicucci]

When using a shadow DOM, inner elements can only be accessed by <root-el>.shadowRoot.querySelector() method. Like in the example:

class CustomElement extends HTMLElement{
    connectedCallback(){
        this.attachShadow({ mode: "open" })
        this.shadowRoot.innerHTML = `
            <template id="example">
                <div>example</div>
            </template>
        `

        console.log(document.querySelector("#example"))  // null
        console.log(this.shadowRoot.querySelector("#example"))  // <template id="example">
    }
}

window.customElements.define("test-ce", CustomElement)

In contrast, the current implementation of resolveTemplate() in src/walk.ts makes use of document.querySelector() which results in one's inability to use component templates inside a shadow DOM.

Perhaps if the template element could be passed directly to $template or an optional property like $templateLocation is made available, the above issue could be avoided.