• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

170
Views
When using HTML custom components, how can I make it so I can choose between templates by attribute?

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.

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error