Consider adding component instance ID to CSS selectors

[rglover]

Just ran into an edge case where I pass a prop to a component that's referenced in the CSS. I have two instances, but only the CSS for the last instance applies to all of them. This is because we're just using the componentId selector. Ideally, we could have a more complex selector, but only if there are multiple instances of a component on the page.

[rglover]

You can temporarily circumvent this by using inline styles:

  render: ({ props }) => {
    return `
      <div class="icon-callout-card">
        <i class="${props.icon}" style="color:${props?.iconColor || '#fff'};"></i>
        <h4>${props.callout}</h4>
      </div>
    `;
  },