Strategies for accessing elements within a #shadow-root

Question

Strategies for accessing elements within a #shadow-root

Having trouble changing the display style inside of the #shadow-root and targeting it. Can I do it through CSS or 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>

Attempting to target the .wrapper inside the #shadow-root to apply display: flex; and align-items: center;.

Tried using ::shadow and ::part, but they did not work. Any other suggestions for targeting it with CSS?

html css user-experience shadow-root

Answer 1

Answer №1

It might be more effective and simpler to utilize JavaScript for targeting and modifying the content.

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

Answer 2

It might be more effective and simpler to utilize JavaScript for targeting and modifying the content.

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

Answer 3

Answer №2

Check out this demonstration featuring the use of 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>

Please note that the Declarative shadowDOM syntax using shadowrootmode may not be supported in FireFox yet:
https://caniuse.com/declarative-shadow-dom

Answer 4

Check out this demonstration featuring the use of 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>

Please note that the Declarative shadowDOM syntax using shadowrootmode may not be supported in FireFox yet:
https://caniuse.com/declarative-shadow-dom

Strategies for accessing elements within a #shadow-root

Answer №1

Answer №2

Similar questions

website with a horizontal scroll-bar

Encountered a problem with Vuetify's sass variables

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

What is preventing NgClass from applying the CSS styles?

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

Altering the inner HTML content of a div using the ID within an Angular component function

Javascript menu toggle malfunctioning with sub-menus

Issue with jQuery fadeTo() not working after appendTo() function completes

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

Generating PDF files from HTML documents using Angular

Customize the background color of a particular select element within an array of dynamically created select elements

The directive for Content Security Policy in Django framework

I'm encountering problems when attempting to display the image/png response from an xmlHTTPRequest. Instead of the correct data, I

Presentation - hyperlink only functioning for final slide

Use flexbox to manage the width of containers and control the wrapping of elements

What is the correct xpath format for the options that are listed?

Center text within a dropdown using Bootstrap styling

Shift all content to the right when viewing on mobile devices

Using Material-UI to add a pseudo class '::before' with component class properties

Are there various types of HTML5 document declarations available?