black color on buttons in ui

[nilzona]

this is a little bit of a "guess fix" from my side. But I believe it would resolve the issue I have.

resolves #63

[nilzona]

I think it would work to add color: black in the selector above for both cases, but that would maybe give some side-effects ... I haven't tested all cases.

[ralphsaunders]

We also experience this issue in our codebase.

In our case, this happens when styles get written to page that set button to be color: inherit, which means buttons inherit their colour from the popup - https://github.com/joeldenning/import-map-overrides/blob/main/src/ui/import-map-overrides.css#L38

Whilst we could try writing the CSS a little more defensively, it may be more reliable to render the UI to ShadowDOM.

https://github.com/joeldenning/import-map-overrides/blob/main/src/ui/custom-elements.js#L38

/**
 * Now
 */
this.renderedEl = render(
    h(Comp, { customElement: this }),
    this,
    this.renderedEl
);


/**
 * Shadow DOM
 *
 * In practice, CSS may need to be injected as a style tag into the root of the new Shadow DOM element.
 */
this.shadow = this.createShadowRoot();
this.renderedEl = render(
    h(Comp, { customElement: this }),
    this.shadow,
    this.renderedEl
);

@joeldenning If you're happy with the above direction I can raise an alternative PR.

Cheers,
Ralph

[joeldenning]

I'm not opposed to switching to shadow DOM, but am going to accept this contribution as-is as a patch fix.

[joeldenning]

Released in https://github.com/joeldenning/import-map-overrides/releases/tag/v3.0.0