search

single-spa / import-map-overrides

A browser and NodeJS javascript library for overriding import maps
MIT License
341 stars 47 forks source link

black color on buttons in ui #64

Closed nilzona closed 2 years ago

nilzona commented 2 years ago

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

resolves #63

ralphsaunders commented 2 years ago

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 commented 2 years ago

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

joeldenning commented 2 years ago

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