How to target a class in shadow root without JS?

Question

Suppose I have a html element with a shadow root.

<my-element>
#shadow-root
<div class='need-target-this' />
</my-element>

How to position the div inside the Shadow root?

I tried using

:host(my-element.need-target-this)

But that doesn't help. What am I missing here?

Answer 1

• Use the tag within shadowDOM to set the style of shadowDOM

• See also::part: https://developer.mozilla.org/en-US/docs/Web/CSS/::part

• See also: : :slotted CSS selector for nested children in ShadowDOM slots

customElements.define("my-element",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"}).innerHTML = `
    
    
    `;
  }
  connectedCallback(){
    this.shadowRoot.querySelector("span").innerHTML = `Web Component!`;
  }
});

Hello

Answer 2

In case it helps someone: I wrapped my element with div, added ref and went to

const Shadow = ref.current.querySelector('my-element').shadowRoot

const target = Shadow?.querySelector('.need-target-this')

target.style.whatever = 'value';