How to target element inside #shadow-root?

Question

I want to change the display style inside of the #shadow-root and am having some trouble targeting it. First question, is it possible to target it through CSS? Or is it better to do it through JS?

#retirement-services-modal #rs-two-col::shadow(.wrapper) {
  display: flex;
  align-items: center;
}

<div id="retirement-services-modal">
  <sdf-layout-two-col id="rs-two-col">
    #shadow-root
    <div class="wrapper">
      <div class="col-1">content goes here</div>
      <div class="col-2">content goes here</div>
    </div>
  </sdf-layout-two-col>
</div>

I am trying to target the .wrapper inside the #shadow-root to add a display: flex; and align-items: center; .

I tried to target it with ::shadow but that did not seem to work. I also tried ::part but that did not seem to work either. Are there any other ways to target it through CSS?

Instead of copy/pasting HTML result; please rewrite your code to a working snippet defining your/a Web Component with shadowDOM. Then we can reply to it with one click. ::shadow won't work, add the :part() code you tried. — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Oct 24, 2023 at 17:03
basically HTML, XML, ...SGML all have these 2 letters M and L to indicate that they are Markup Languages. CSS is an "emanation" of the property of the style attribute of HTML Markup tags, it can only address elements belonging to an HTML tag. — Mister Jojo
– Mister Jojo, Commented Oct 24, 2023 at 17:32
@Danny'365CSI'Engelman that unfortunately didn't work. I am trying to rewrite the code as a working snippet but don't seem to see that option there (I am new to Stack Overflow! Let me take one more look. — Ripley E
– Ripley E, Commented Oct 25, 2023 at 14:51

Afzal K. · Accepted Answer · 2023-10-24 18:14:22Z

0

it may be more efficient and easier to use JS to target and manipulate the content.

const el = document.querySelector('#rs-two-col'); // access the outer element
const sh = el.shadowRoot; // access the shadow DOM of the element
sh.querySelector('.wrapper').style.cssText = 'display: flex; align-items: center;'; // access the nested element within the shadow DOM and change the CSS property of the element

edited Oct 24, 2023 at 18:14

answered Oct 24, 2023 at 18:08

Afzal K.

9515 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny '365CSI' Engelman Over a year ago

Fine for existing DOM nodes. But what if a new node with a .wrapper enters the DOM? How are you going to change that then? If the Web Component creator gives you a part hook (pun intended) you have the technology to do it all with CSS.

Danny '365CSI' Engelman · Accepted Answer · 2023-10-25 16:05:53Z

0

Here is an example using part

<style>
  host-element::part(foo){
    border:10px dashed green;
  }
  div {
    border:20px solid red; /* not applied to shadowDOM */
  }
</style>

<host-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: inline-block;
        width: 100vw;
        background:hotpink;
      }
      .wrapper {
        text-align:center
      }
    </style>
    <div part="foo" class="wrapper">
      <slot></slot>
    </div>
  </template>
  <h2>LightDOM content slotted in shadowDOM</h2>
</host-element>

Note: Above Declarative shadowDOM notation shadowrootmode is not available in FireFox yet:
https://caniuse.com/declarative-shadow-dom

answered Oct 25, 2023 at 16:05

Danny '365CSI' Engelman

22.3k2 gold badges49 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to target element inside #shadow-root?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related