How can I target class inside shadow root without JS?

Question

Let's say I have html element with shadow root.

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

How can I target div inside shadow root?

I've tried to use

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

But it didn't help. What am I missing here?

We need the complete code, are slots involved? Do you want to target from _inside_ or _outside_ the shadowRoot? — Danny '365CSI' Engelman, Jan 23 '23 at 16:10

Danny '365CSI' Engelman · Answer 1 · 2023-01-23T16:32:12.640

1

Style shadowDOM with <style> tags inside shadowDOM
also see ::part: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
also see: ::slotted CSS selector for nested children in shadowDOM slot

customElements.define("my-element",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"}).innerHTML = `
    <style>
      .target { background:hotpink; border: 5px dashed green }
      ::slotted(span) {
        color : red;
      }
    </style>
    <slot name="title"></slot>
    <span part="mytarget" class='target' />`;
  }
  connectedCallback(){
    this.shadowRoot.querySelector("span").innerHTML = `Web Component!`;
  }
});

<style>
  * { font: 42px Arial }
  span {
    background:gold; /* slot content styled by Global CSS! */
  }
  .target { border: 5px solid blue } /* does NOT style shadowDOM! */
  
  my-element::part(mytarget) {
    font-size: 150%;
  }
</style>

<my-element class="target"><span slot="title">Hello</span>

</my-element>

edited Jan 23 '23 at 16:32

answered Jan 23 '23 at 16:27

Danny '365CSI' Engelman

16,526
2
32
49

Thanks for your answer, but it wouldn't help. I'm using 3rd party package for Next.js, that's why I need override styles, forgot to mention it. Anyway, thanks for your time – Alex Jan 23 '23 at 16:30
If you have script access you can inject anything of the above – Danny '365CSI' Engelman Jan 23 '23 at 16:33
I will go with ```document.querySelector``` and overriding styles solution, but thank you anyway. Was just wondering if it could be done with pure CSS. – Alex Jan 23 '23 at 16:53

score 0 · Accepted Answer · answered Jan 24 '23 at 11:05

0

In case it will help some one: I wrapped my element with div added ref and then went

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

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

target.style.whatever = 'value';

answered Jan 24 '23 at 11:05

Alex

455
1
5
14

How can I target class inside shadow root without JS?

2 Answers2