Is there a way to have the element name in a variable?

[artfulrobot]

For example, Svelte has svelte:element and vue has an equivalent (been a while, can't recall what it's called).

e.g.

template() {
  let {tagName} = this.someModel; // e.g. "h1" or "div" or "some-other-component"
  return html`<${tagName}>blah</${tagName}>`;
}

[kennyfrc]

I think svelte / vue does that at compile time?

I haven't tried this yet, but maybe you can get somewhere with tagName, like so:

// model defined outside, as an Element

// ...
template() {
  const tagName = someModel.tagName;
  switch (tagName) {
    case 'H1':
      return html`<h1>foo</h1>`;
    case 'DIV':
      return html`<div>bar</div>`;
    case 'SOME-OTHER-COMPONENT':
      return html`<some-other-component>baz</some-other-component>`;
    default:
      return html`<span>foofoo</span>`;
  }
}
// ...

See tagName docs here

[artfulrobot]

I'm not sure re compile time, e.g. I have code that renders a set of elements/components from an array of arrays that includes the tag/componnent name.

I don't think the above will work out for my use case because the content is complex, so I think the pattern above would require duplicating that work/code for each possible tag (I note slots are not possible with camijs).

hmmm, although I suppose I could call out to a function that returns something like.

  contentTemplate() {
    return html`Some ${name} content`;
  }
  template() {
    return html`<p>Hello ${this.contentTemplate()}, how are you?</p>`;
  }

I'll try that.

[artfulrobot]

Ah, no, this does not work:

class PennieContainer extends ReactiveElement { 
  content = []                                  
  name = 'world'                                
  template() {                                  
    return html(`                               
      <h2>${this.templateContent()}</h2>        
      <div>${this.templateContent()}</div>      
      `);                                       
  }                                             
  templateContent() {                           
    return html`                                
    <span>Hello ${this.name}</span>             
    `;                                          
  }                                             
}                                               

Uncaught Error: invalid template strings array