Polymer 3 custom element within a custom element template

Question

I have two components: A and B. I want to use within As template getter a custom element which I import via regular import statement, example:

import {LitElement, html} from '@polymer/lit-element';
import B from "./b-element";

export class A extends LitElement {
  ...
  render() {
    return html`Here comes the element <b-element></b-element>`;
  }
}

customElements.define('a-element', A);

Element B:

import {LitElement, html} from '@polymer/lit-element';

export class B extends LitElement {
  ...
  render() {
    return html`Hello Component B here!`;
  }
}

customElements.define('b-element', B);

Now of course I want to embed A somewhere else.

However b-element is not recognized although module B has a call to customElements.define(...) , which seems not to cause it being recognized at this point.

Answer 1

This works, I noticed that the custom element name was invalid in my actual code! Don't forget to define the custom-element name in-the-specification way!