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.