Web Component prevent multiple API fetches
From a super short review;

I would attach the style tag to the head element, especially if you can have this element several times on the page (and ensure that you only add it once)

When all a fat arrow function does is call an another function with the provided parameter(s), then you might as well
  .then(resolve)
  .catch(reject);

instead of
  .then((data) =&gt; resolve(data))
  .catch((err) =&gt; reject(err));


This will not work in a rainy day scenario;
 window.rates[this.baseCurrency].data.rates[this.conversionCurrency];

Consider how you would handle this if window.rates[this.baseCurrency] is missing.