How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code.

Initially, the DOM structure looked like this:

<div class="foo">
  <div class="bar"></div>
</div>

and I could easily make modifications using .foo .bar.

However, with the latest version release of the app, the child element is now within a shadow DOM:

<div class="foo">
  #shadow-root
    <div class="bar"></div>
</div>

As expected, my previous selector no longer functions. How can I target the .bar element only if it is nested inside a .foo element? I have come across information about ::part(), but unfortunately, I am unable to add part="bar" directly to the DOM element. Thank you for any assistance provided.

cssshadow-dom

Answer №1

When using only CSS and not utilizing the part attribute, it becomes challenging to select child elements from an external source. This intentional limitation allows creators of Shadow DOM to maintain full control over which elements can be styled externally, as outlined in the motivation.

However, if JavaScript is permitted and the Shadow DOM is established with an 'open' mode, you have the ability to target child elements using shadowRoot.querySelector.

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const div = document.createElement("div");
div.className = "bar";
div.textContent = "I'm in the shadow DOM";
shadow.appendChild(div);


document.querySelector("#host").shadowRoot.querySelector(".bar").style.color = "red";
<div id="host" class="foo"></div>

You can also dynamically include styles that target the bar element through JavaScript by following guidelines like this one, but this approach is only viable when the mode is set to open.

If not, you may need to investigate whether custom properties are being used in the app's styles that require customization or carefully design the styling of the Shadow DOM with inherited properties.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to eliminate the sticky class as you scroll down?

Check out this jQuery code I wrote to remove the sticky class while scrolling down: $(window).scroll(function (e) { if ($('.main_form_wrapper').length != 0) { var window_scroll = $(window).scrollTop(); console.log(window_scro ...

jqueryhtmlcss

When a parent element uses the flex property and its child elements have no content, the flex child will expand

I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...

htmlcssflexbox

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

jquerycssjquery-mobilejquery-mobile-collapsible

React Nested Menu Selection

Having trouble displaying TextField values in my React app. Utilizing material UI and material-ui-phone-number packages. Noticed that values appear behind when clicking the flag due to zIndex issue. Looking for modifications only on dialog2.js For code ex ...

cssreactjsmaterial-uireact-hooksjss

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

phpjqueryhtmlcssajax

Hover over a row in one table to modify the appearance of another row in a different table

Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related? You can find a JSFiddle link illustrating what I am trying to achieve. Here is an example of the code: table#table1 #el1:hover + ta ...

htmlcss

You are only able to click the button once per day

I am working on a button that contains numeric values and updates a total number displayed on the page when clicked. I would like this button to only be clickable once per day, so that users cannot click it multiple times within a 24 hour period. Below i ...

javascriptjquerycsshtml

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

Paused session in web development

Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...

htmlcssclass

Successfully resolved: Inability to dynamically adjust button color according to its state

Currently I am working on a feature where a button changes color when it is disabled, but also has a custom color when enabled. Here is the code snippet I am using: Despite setting blue text for the button, it remains blue even after becoming disabled. Ho ...

javascriptcssreactjsmaterial-ui

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

I have encountered an issue with a modal view that contains content extending beyond its boundaries. To remedy this, I applied the overflow-y: scroll property. However, the problem arises when the modal view overlaps with the body, which also has scrolling ...

jqueryhtmlcssscroll

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

Ways to retrieve a JSON element and incorporate it into a CSS styling

Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...

javascripthtmlcssjsonvue.js

Jquery Toggle not applying class change on mobile devices

Check out my website: . There's a menu option called Services with a dropdown feature. Here is the code for it: <li class="dropdown menu-services"><a class="dropdown-toggle" href="#" data-toggle="dropdown" data-target="#">Services <b c ...

jquerycss

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

cssoverflow

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Locate the closing anchor tag following the image

I need to locate the closing anchor tag that wraps an image with the class name "cat-image" in order to move a div right after it. However, I am unable to modify the HTML by adding IDs or classes to the anchor or image tags. Below is an example of the HTM ...

javascriptjqueryhtmlcssdom

The alignment of Flex Divs is off despite having identical heights

I'm facing an issue where divs are not staying at the top of their parent div if the image they contain does not have the same height as the others. Within my navbar, I have icons of varying sizes placed inside divs using display: flex to vertically ...

htmlcssflexbox

Using Java Selenium to switch to an iframe within a shadow root that is open inside a webview

I am currently working on automating test cases for my node webkit application using Java Selenium. The process involves attaching the chromedriver to the main window, but all accessed sites appear in the DOM as a webview. Here is an illustration of the DO ...

javaseleniumiframewebviewshadow-dom