How to change the background color of a parent component from a child component

Question

I am studying the LitElement technology and I have an exercise which I cannot solve completely, I have to nest two components, where the child component will have 3 buttons and depending on the button that is pressed, the background of the component must be changed father, I understand that for this exercise you must use customizable events with DispatchEvent, I leave you my code that I have been doing for this exercise and I also share some screens of how this exercise should work, I hope you can help me, thank you very much in advance

image pressing the green button

image pressing the red button

image pressing the blue button

child component image

Parent component image

Answer 1

Try this, it is hard to understand the problem without including the code.

static styles = css`
  :host{
   ..your style   
  }
`

Answer 2

post a photo of the code, they are as a link, there is an image to represent what I want to do and there are the images of all the code of the parent and child components

Answer 3

In you child component to push and event outside shadow dom, your event should have composed set to true e.g.

this.dispatchEvent(new CustomEvent('myEventName',{bubbles:true,
composed:true,
detail: my-details})

And at parent you need to consume the event with @ e.g.

<my-child @myEventName=${this.handleMyEvent($event)}></my-child>

useful links

• https://lit.dev/docs/components/events/#shadowdom-composed
• https://lit.dev/docs/components/events/#dispatching-events-after-an-element-updates