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

Managing traffic in Google Kubernetes Engine (GKE)

Unable to modify border color for Material-UI OutlinedInput

Ways to conceal a division within the Repeater

What is the best way to make sure the background color of a container stretches across the full width of the screen?

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

The Three JS on the website is error-free, yet it fails to function properly

What are some alternatives to tables for displaying two lines of headings and corresponding data?

jQuery toggle functioning in one scenario, but failing in another

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

Utilize Jsoup to retrieve a specific value from a designated HTML source

toggle switch for numerical input

What is a method to resize an SVG path to a specific pixel size without altering any of the SVG attributes?

The Javascript code fails to execute after other scripts have been employed

What are the steps to increase the size of the v-stepper-step in Vuetify?

Storing the DOM in a Variable

The art of sketching precise lines encircling a circular shape through the

The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

flex child moves outside parent when available space shifts

Classic design of the shadow element