JSX components not rendering into a declarative shadow root (e.g. <template> tag)

[thescientist13]

Summary

Noticed that if trying to do something like this

export default class HeadingComponent extends HTMLElement {
  sayHello() {
    alert(`hello world!`);
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.render();
    }
  }

  render() {
    return (
      <button onclick={this.sayHello}>Get a greeting!</button>
    )
  }
}

customElements.define('wcc-heading', HeadingComponent);

The output I was getting was not including a wrapping <template> tag.

{
  html: '\n' +
    '        <wcc-heading>\n' +
    '          <button onclick="this.getRootNode().host.sayHello()">Get a greeting!</button>\n' +
    '        </wcc-heading>\n' +
    '      '
}

Details

One thing to call out is that normally the initial HTML is setup from some direct call to innerHTML, e.g.

export default class Header extends HTMLElement {
  connectedCallback(){
    this.innerHTML = 'Hello World!';
  }
}

But now with a render function handling all that, will still need that signal, which looks to be in the code, but should probably call this out more explicitly in the JSX section of the docs, since you would be using render instead of shadowRoot.innerHTML now.

---

Also looks like there was never a test made for this so that probably explains why its not working 😅