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.
1,530
questions
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)
&...
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 ...
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 ...
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-...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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\Новая папка\...
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 ...
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: ...
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 ...
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 ...
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 ...
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 ...
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:
<...
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>
...
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<...
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 ...
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 ...
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::...
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 ...
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 ...
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-...
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 ...
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, ...
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 ...
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(&...
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="...
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....
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 ...
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"...
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 ...
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 ...
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">
<...
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-...
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 ...
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/...
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 ...
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 ...
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 ...
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 ...
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-...
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 ...
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 ...