Closed adamjohnson closed 6 hours ago
@zeroedin Also mentioned this bug in this rh-video-embed
comment.
I took the following steps:
const card = $('rh-card')
card.colorPalette = 'darkest'
card.shadowRoot.getElementById('container').append(card.querySelector('rh-cta'))
I then observed that the cta, now in the shadow root, has the proper colours
I do believe that this addresses the issue as presented. It could be that adjustments on a per-element basis need to be made in #1853, so let's address any that come up over there.
Describe the bug
If you have a component that is a
colorContextProvider
and nest an RHDS component in the shadowDOM of that provider, the nested component does not receive the appropriate color context from the host.I'm currently nesting
rh-button
in the shadowDOM and not seeing the appropriate color palette onrh-button
whencolor-palette="dark"
is applied to the host.Screenshots
Steps to reproduce
npm run dev
.elements/rh-card/rh-card.ts
import '@rhds/elements/rh-button/rh-button.js';
<rh-button variant="close">Close</rh-button>
(or anywhere inside therender()
method.elements/rh-card/demo/rh-card.html
and addcolor-palette="dark"
to the card.Results
While the
rh-card
has a dark color context, therh-button
element still displays in the light color context.Expected behavior
The
rh-button
should inherit the color palette from the host and display light on light contexts and dark on dark contexts.Operating System and Browsers
All