It's hard for me to word this.

I want to do something like and

But the inside has to be very different, so simply changing the CSS class is not good enough.

I want two designs within my JS file (which is, let's say, icon-button.js)

What js would I use in my icon-button.js file to make it so that when I enter shape="square" it picks one template and shape="circle" it picks another.

I already know how to set up custom components, I'm using them.

I just need to know how to make it so a custom attribute will switch between different templates encapsulated in the custom component file.

Is this possible?

HTML would look something like this

  <template id="sq">
<div id="buttonContainer">
  <button>
    <div id="buttonContentContainer">
    </div>
    <svg width="32px" height="32px" viewBox="0 0 32 32">
    <polyline points="31,1 31,31 1,31 1,1 31,1"/>
    <polyline points="31,1 31,31 1,31 1,1 31,1"/>
  </svg>
  </button>
  <div id="label"></div>
</div>
</template>
<template id="ci">
<div id="buttonContainer">
  <button>
    <div id="buttonContentContainer">
    </div>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50"/>
    </svg>
  </button>
  <div id="label"></div>
</div>
</template>

one would have a circle, the other a square.

everything else is working.