Questions tagged [shadow-dom]

Shadow DOM, a key part of Web Components, allows you to create component-based apps using a subtree of DOM elements maintained in isolation from the main DOM.

Filter by
Sorted by
Tagged with
0 votes
0 answers
32 views

Select all shadow root elements of multiple elements [duplicate]

I have these elements and I want to select all sc-product-item inside of each sc-product-item-list <sc-product-item-list class="hydrated" id="selector-1> #shadow-root (open) &...
mrmoon97's user avatar
0 votes
0 answers
19 views

Can't load Google Fonts/icons from a Svelte web component

I have a Svelte app (not Kit) compiled as a web component and I'm trying to load Google Fonts and Material Icons, but it only works during development. When I build the component nothing logs. I've ...
Nikolay Dyankov's user avatar
0 votes
1 answer
54 views

Shadow DOM - Highlight not working if tabindex used with delegatesFocus

I've noticed that double click text selection stops working for other elements if the tabindex attribute is used anywhere inside a shadow DOM with delegatesFocus: true. I can reproduce this in Chrome ...
Michael's user avatar
  • 3,604
0 votes
0 answers
16 views

How do i make a custom HTML5 component in a slot inactive?

I have a custom component that generates a list using a "prototype" element passed in via a slot, which then creates its' own content. ie with template like <template id="template-...
Charles Hanchett's user avatar
2 votes
3 answers
68 views

Make element in shadow dom 100% of custom element height with min-height and border while also scaling parent if overflowing

I am making a custom element that functions as a textarea with syntax highlighting and some other features. I've simplified it to a custom element with a div inside that gains height when clicking the ...
VilgotanL's user avatar
  • 372
0 votes
1 answer
26 views

Why are some styles not working when using a Svelte component rendered by Go?

I'm experimenting with using Svelte (not SvelteKit) in a Golang application. But I've hit a stumbling block with the CSS not being rendered correctly on the Svelte component. It's pulling in some of ...
Chris Armitage's user avatar
0 votes
1 answer
40 views

Custom link component inline spacing

I'm creating a component library based on lit web components. However, i suspect my problem to be unrelated to Lit itself but rather related to shadow dom. My link component has the following styles ...
LorisBachert's user avatar
0 votes
0 answers
32 views

Javascript: How to rewrite links inside a webcomponent shadow dom?

So, I whipped up something that's really only useful for me personally. I have a game that outputs some tables as markdown files, and I wanted to be able to view them easily as tables. So I'm using a ...
kelly Murphy's user avatar
0 votes
0 answers
34 views

Web scraping the content inside nested shadow root using Python

I am trying to scrape the link for CVS store, and found it is inside nested shadow root. I tried a couple of methods and it didn't work. I would like to get the link of that 'store detail' button from ...
user15410844's user avatar
0 votes
1 answer
48 views

python/selenium: how to access button element in a slot under the shadow-root (shadow DOM)?

I am new to the shadow DOM and I hope I can get help here. Many Thanks! the link is: wertpapiere.ing.de/ Problem is from clicking the button to accept cookie. enter image description here code until ...
Jpydb's user avatar
  • 1
2 votes
1 answer
61 views

Can JS be isolated within the shadow DOM as it is in an iframe in SO's code snippets?

The SO site appears to use an iframe to run code snippets. Can any form of web components accept user-provided JavaScript and run it in isolation within the shadow DOM only? I tried both a simple ...
Gary's user avatar
  • 2,559
0 votes
2 answers
95 views

How to use Shadow Dom with Javascript and CSS modules

EDIT 1 Thanks very much @Danny for the very useful answer. I guess my question has more to do with CSS sope and encapsulation. If I import a CSS StyleSheet into a module then I don't want that ...
McMurphy's user avatar
  • 1,289
0 votes
0 answers
30 views

Highlighting Elements Within Shadow DOMs - How to Achieve This Without Event Listeners?

I am working on a project where I need to highlight elements within both regular DOM and shadow DOM. Currently, I have a function that binds event listeners to elements within shadow DOMs, but I want ...
Demodev's user avatar
  • 94
0 votes
0 answers
25 views

How to find elements inside Shadow DOM from Selenium

from selenium import webdriver import os from selenium.webdriver.chrome.options import Options import time from selenium.webdriver.common.by import By executable_path = "D:\python\Новая папка\...
arseniybr's user avatar
0 votes
2 answers
72 views

Inline styling inside javascript of web component

I am trying to add a custom scrollbar to a web component. I am not very familiar with web components but i understand that it is difficult to apply pseudo-elements to parts. From my reading, one way ...
Matt S's user avatar
  • 93
0 votes
1 answer
57 views

Apply pseudo-element to shadow elements

I'm trying to add custom scrollbar styling to a modal using CSS, but it is not working and the default scrollbar styling remains. .modal::-webkit-scrollbar { background-color: #fff; width: ...
Matt S's user avatar
  • 93
0 votes
1 answer
40 views

How can I inspect the shadow DOM of native controls in Chrome developer tools?

I want to style a native input element, which in Chrome has a shadow root and can be styled with many pseudo-selectors. It is apparently possible to see the shadow root in Developer Tools, and I'm ...
jameshfisher's user avatar
  • 34.8k
1 vote
1 answer
36 views

popoverTargetElement does not cross shadow boundaries

The new Popover API, when used declaratively, does not work across shadow boundaries. This is a limitation when creating reusable web components that encapsulate some logic and also use a popover ...
Philipp Gfeller's user avatar
0 votes
0 answers
79 views

Set shadow root mode to "open" with selenium

I'm doing automation with selenium in python. At some point in my code, I have to access and click a button. This button is inside a shadow root whose mode is "closed", itself inside an ...
BluBrry's user avatar
0 votes
1 answer
82 views

web component: slot vs attribute when passing data that is to be displayed

What is the better way to pass data, which purpose is to be displayed in a Shadow DOM, to a custom element. Is this by using an attribute or a slot? Attribute example class MyAttributeComponent ...
Rogier de Ruijter's user avatar
0 votes
0 answers
15 views

Restrict style on cloned dom

I have a form, which has its own styling through CSS and JavaScript. I have cloned a dom but I don't want styling to put affect into that cloned dom. How would i achieve it? Example for reference: <...
Kaushtup Bista's user avatar
0 votes
0 answers
42 views

Using Turbo Frames in LitElement

I have a web application using Turbo Frames from Hotwire. The basic layout looks like this: <nav> <nav-button path="/desktop" label="Desktop"></nav-button> ...
stedekay's user avatar
  • 477
0 votes
0 answers
45 views

Hide Light DOM (Nested Elements) on Web Components While Waiting for Slot Absorption to Prevent Flashing Temporary Rendering of Content

I want to prevent showing light DOM content while it's waiting to be absorbed into a <slot>. I've tried many workarounds. Here's my use case: <custom-select> <custom-option>One<...
Modular's user avatar
  • 6,660
0 votes
0 answers
57 views

How to work with dynamically loaded shadow dom with mutation observer?

I have a webpage that dynamically loads a shadow dom. I have added mutation observer to the document that can not capture insertion of shadow dom. But I have to detect it onload. I can observe the ...
noob kid's user avatar
0 votes
1 answer
81 views

Can't click on button in shadow-dom

I'm trying to scrape a dynamic site (https://app.shaggyowl.com/accesso-titolare/index.html) with selenium and python. I found a workaround to insert username and password but I'm not able to click ...
Federico's user avatar
0 votes
1 answer
45 views

klarna-placement::part(osm-container) stopped working (Sept 27 2023)

Does anyone knows why the ::part() styles are not applying to a component I have the following element: klarna-placement html Then following this doc, I added the following styles klarna-placement::...
dnpg's user avatar
  • 1
0 votes
1 answer
40 views

Unable to Select Text Across Elements within Shadow DOM

I'm currently utilizing Custom Elements within a with the attribute contenteditable=true. However, I've encountered an issue with the shadow DOM, as it seems to prevent me from selecting text across ...
Frank's user avatar
  • 1
1 vote
1 answer
161 views

Why does [contenteditable] become unfocusable in Chrome 117 (and 118 beta)

I have been working on a project that creates a custom element with a <slot> in the shadowRoot. Starting with the release of Chrome 117 if someone clicks on a contenteditable div the element ...
Jason Sperske's user avatar
0 votes
1 answer
56 views

How to target an element inside a shadow DOM from another web component wrapped inside it

Well, I'm not sure I've been clear by the question title... sorry. I would like to show a wc-tooltip I'm already using without problems on the DOM: <div> You can use <span class="disk-...
vitto's user avatar
  • 19.2k
0 votes
1 answer
59 views

Cypress - How to iterate over elements and filter out ones which have a shadow dom?

I have a page with many elements, five of which are div elements with zero attributes. Each of those five divs have a shadow root/shadow dom. I am interested in only one of the five divs which has an ...
MasterJoe's user avatar
  • 2,159
0 votes
1 answer
49 views

Custom Elements + Shadow Dom - styling the last child child of a named slot

I am trying to apply a style to the last child of a named slot, and am struggling with getting the correct selector. Essentially, last-child seems to apply in the light DOM, and not the shadow DOM, ...
Paul Gelardi's user avatar
1 vote
1 answer
71 views

Sandbox events inside closed shadow root

I have a closed shadow root in my document that represents custom controls containing sensitive information, however it seems as though (despite being closed) events will still bubble out of the ...
Prime's user avatar
  • 2,430
0 votes
0 answers
130 views

Selecting a shadow root element that is present under a dropdown

Unable to select a shadow root element that is present under a dropdown using selenium Java. Tried with JS path, but the id keeps changing dynamically, so unable to select it. document.querySelector(&...
Nagarathna's user avatar
0 votes
1 answer
88 views

Modify CSS inside a Shadow DOM

I have a shadow DOM being created by a third party. I want to set the display of a div with class .controls inside the shadow DOM to none. How can I achieve this via CSS? <div class="...
Jake Cano's user avatar
0 votes
1 answer
33 views

I want to click on the next element in Python Selenium. I can't click because of shadow dom. What should I do?

I want to click on the next element in Python Selenium. I can't click because of shadow dom. What should I do? My code is this and the corresponding html is this enter image description here browser....
양원민's user avatar
0 votes
1 answer
51 views

3cx change bubble button style in Wordpress functions.php - move up an async button and styling it after waiting fetch for async dom created

I have been struggling with the moving up of the chat bubble overriding my theme bottom login/out web app bar for 2 days: Tryed to: modify in Wordpress the child style.css and the functions.php The ...
Avsof web apps's user avatar
0 votes
0 answers
26 views

Accessing shadow-root in selenium causing org.openqa.selenium.JavascriptException: javascript error: circular reference

I'm implementing automated tests and I have a web page with a shadow-root that I need to access I'm trying to do that by using this code: val shadowHost = Browser.findElement(By.id("editor_1"...
Umer Shahzad Dar's user avatar
1 vote
1 answer
108 views

Why does CSS variables defined like `:where(:root, :host) { --my-var: value }` inside Shadow DOM not work?

I've noticed that some of the CSS variables I've defined within a web component (using Shadow DOM) aren't functioning as expected. It appears that using :where(:root, :host) is causing the issue. When ...
morishin's user avatar
0 votes
0 answers
44 views

Need help finding the correct css selector for shadow dom elements

I am looking to find the css selector for the download button. It is located in a shadow dom element. I am getting some issues when I try to find it. This is what I am doing in the js executor return ...
Pab's user avatar
  • 1
1 vote
2 answers
71 views

How can access the specific html tag inside of slot in light DOM through the shadow DOM?

I've created a custom element and defined it in html as follows: ` <header> <custom-navbar links="[{title:'home'},{title:'About'}]" class="bg-purple"> <...
amir tbi's user avatar
  • 356
0 votes
0 answers
61 views

Importing CSS Module in a Shadow DOM's Style Tag (`@import url()`) Using Stimulus Controller

I want to import a CSS module (in this case @algolia/autocomplete-theme-classic) in the style tag within the shadow root. The stimulus controller looks like this: // import '@algolia/autocomplete-...
yudukikun5120's user avatar
0 votes
0 answers
117 views

Add Shadow DOM to Chrome Extension

I am new on the chrome extension. I developed a chrome extension with React and used components from https://mantine.dev . When I complete my extension, I tested on different sites, and saw that the ...
Latif Uluman's user avatar
0 votes
1 answer
47 views

GoogleFont in LitElement ShadowDOM

I'm creating a component in LitELement, with ShadowDOM, where I want to display an icon from GoogleFonts' Material Symbols Outlined. In index.html, I am using this url: https://fonts.googleapis.com/...
user776686's user avatar
  • 8,153
1 vote
2 answers
82 views

Web Component #shadow-root css leaks to document

My understanding of web components was that you can use it to prevent css leaks from the web component to the parent. I need exactly that but for some reason styling inside the web component affects ...
rdehuyss's user avatar
  • 784
0 votes
0 answers
43 views

The solution on how to wait for element to be visible in Shadow DOM

Currently there is no out of box solution in the Robot Framework libraries on how to wait until the element is visible on the page in shadow DOM. I came up with one approach. Perhaps it will be useful ...
Igor Bosyi's user avatar
0 votes
0 answers
65 views

Why templates mixed with isolation in ShadowDOM?

The title is a bit illogical, but this is the shortest explanation of what will be discussed. Can anybody explain from architecture's point of view? Templates is just templates. Custom HTML elements ...
Energy's user avatar
  • 1
0 votes
1 answer
116 views

modify ion-datetime button css properties

I would like to change the button text-transform property of the datetime buttons to none. Right now my Buttons are looking like this: Buttons1 According to the Ionic documentation I can not access ...
tiga05's user avatar
  • 3
0 votes
2 answers
58 views

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-...
Sikshya Maharjan's user avatar
0 votes
1 answer
33 views

Corner case where CSS properties pass through the Shadow DOM even though :host {all: initial}

this is probably my first question on Stack! I found what I believe is a corner case to CSS properties passing through the shadow DOM despite the famous fix proposed here. General Context I am ...
z2ak's user avatar
  • 3
0 votes
1 answer
78 views

How can we interact with embedded html pages using selenium webdriver

Unable to interact with elements in the embedded html page inside the parent html Hi, The webpage i am automating has an embedded html page inside the parent page. I am not able to interact with the ...
Aditya's user avatar
  • 1

1
2 3 4 5
31