Questions tagged [shadow-root]
61 questions
1
vote
0 answers
Adding CSS to Shadow-root created by a third party module
I'm working on a Magento2 website and I've installed an Amazon pay module that has created a few extra buttons on the checkout page (default Luma theme). Most of these new elements are fine when it comes to overriding their CSS. However the plugin…

user16561352
- 11
- 2
1
vote
1 answer
How to enter a value in Shadow-root (user-agent) Java-Selenium?
I used many options, but not one did not help
Used options:
Then I tried the same thing, but with a separate method
option 3
option 4
option 5 (this option records the value, but the page does not see it)
code

Tenny
- 11
- 1
1
vote
1 answer
Selenium | shadow root | Element input is not reachable by keyboard
With Selenium 4.1.2 / Java 11 and a page with "shadow root" elements I have a problem to address a specific input text element.
With this code I reach the input element, the curor is blinking but does not write the sendKeys…

pixelhead
- 35
- 8
0
votes
2 answers
How can we override css inside the shadow root?
I have some CSS for the span tag. All of these are rendered inside the shadow-root. Which looks like the following.
.class-name-a .class-name-b > span {
border-left: var(--css-token-right-statement-border-left);
font-family:…

Sikshya Maharjan
- 296
- 2
- 6
0
votes
0 answers
How to read an element text inside the shadow root
I want to read the date value inside this shadow root.
even though I tried below it says 'no such shadow root'. How can I correct this?
driver.FindElement(CustomTimeHours).GetShadowRoot().FindElement(By.Id("placeholder")).Text

user21541047
- 3
- 3
0
votes
1 answer
how to locate elments within shadow-root (open) using Python Selenium
I'm using Selenium to scrape a website. After a couple of seconds, a cookies popup appears. I discovered that it's located under the shadow-root element. i tried many methods and heres my code
from selenium import webdriver
from…
0
votes
2 answers
How to wait for shadow root child to be located?
I am trying to use selenium to take a screenshot of a website, which has an img tag inside a shadow root, therefore, I want to wait for this img to exist.
Regularly I do something like this:
await…

ATP
- 2,939
- 4
- 13
- 34
0
votes
1 answer
How to click a Button which is located under a Shadow-Root
Hey so I am trying to click a Button which is located in a Shadow-Root, I am new to this topic and this is my first time working with Shadow Roots.
The…

Daniel Kalcher
- 15
- 2
0
votes
2 answers
Shadow-root watir ruby
Good morning,
we are having a severe problem with automated web browsing since shadow-root was introduced on the site.
Following the online guides I figured out that with the instructions:
you manage to enter the tree first and then the branch.
Our…

Alex Stirbu
- 1
- 1
0
votes
1 answer
TimePicker easepick is not working with Stencil
I'm getting an error when try to use the easepick with the Stencil framework.
https://easepick.com/guide/
Error
peError: (t || this.calendars[0]).clone is not a function
at n.renderAll (date-picker.entry.js:3:1)
at new n…

Fabio Ribeiro de Carvalho
- 661
- 7
- 21
0
votes
0 answers
How to get the node in shadow root by point in Chrome?
I can use document.caretPositionFromPoint in Firefox to get the node in shadow root, but there is only document.caretRangeFromPoint can be used in Chrome, however, it can only return the main dom element.
Here is a demo that works in…

Owen Young
- 157
- 2
- 8
0
votes
2 answers
How to return text from element within shadow root with a click event
So, I'm creating my first web component and I'm struggling with the event handling side with elements within the shadow root.
The goal with this component is to display a list of results from an endpoint where the user types in an input field and…

Fab
- 145
- 3
- 20
0
votes
0 answers
How to add react component library to shadow DOM?
I want to prevent my styles from getting overridden by other styles and vice versa.
I have attached the shadow host but it is not quite working and throwing this error.
error -
code -
export const PluginProvider: React.FC = ({
…

Aditya Yaduvanshi
- 21
- 4
0
votes
1 answer
Overriding CSS of div inside a #shadow-root
We are using a third party plugin and im trying to override the CSS of one div in particular. The problem is that i dont understand how you are suppossed to work with #shadow-root
Image with shadow-root code
I have tried using regular CSS to style…

JPD
- 3
- 1
0
votes
2 answers
Styling Vaadin text-area based on class name
We have added global styles to Vaadin text areas in our app like this:
[part="input-field"] {
background-color: rgba(245, 221, 191, 0.4) !important;
border-radius: unset;
}
[part="value"] {
color: black…

Mari
- 143
- 10