shadow-dom Questions

3

I want to change a property in element hidden within shadow root. Due to the nature of a project I can't refer to document in JS directly, I can only use custom class (which doesn't work with shado...
Fogged asked 26/2, 2021 at 11:15

1

Solved

I am trying to run Cypress component testing on a library of Angular components. Currently, all of my components have shadowDom turned on. Which seems to be causing me a problem when running multip...

5

Solved

I had been following the discussion How to automate shadow DOM elements using selenium? to work with #shadow-root (open) elements. While in the process of locating the Clear data button within the...
Peatroy asked 30/5, 2019 at 14:20

4

I'm trying to find a way to encapsulate Javascript without using iframes. Ideally, I'd like a way to load external HTML components (widgets) on a parent page, without the two-step loading process, ...
Inchworm asked 14/2, 2015 at 16:4

10

Solved

Is there a way to change styles found in a shadow element? Specifically, extend/overwrite some properties found in a css class? I am using a chrome-extension called Beanote which hasn't been update...
Waldman asked 4/12, 2017 at 0:49

8

Solved

What is the canonical way to import styles into a web component? The following gives me an error HTML element <link> is ignored in shadow tree: <template> <link rel="style" href="...
Zagreus asked 22/2, 2015 at 22:41

7

Shadow dom encapsulate css styles, selectors don't cross the shadow boundary. Question: How to use global common css styles in shadow dom? (suppose there are some common css styles which will be ...
Occlusion asked 29/2, 2016 at 7:49

6

I am searching a way to styling shadow DOM from the outside. For example, I would like to set the color of all text in all 'span.special' elements as RED. Including 'span.special' elements from sha...
Oxpecker asked 20/5, 2016 at 17:34

4

Solved

I need get elements from Shadow DOM and change it. How i can do it? <div> <input type="range" min="100 $" max="3000 $"> </div>
Badinage asked 1/8, 2016 at 14:45

2

Solved

Anchor elements (<a>) are created when the user interacts with a web component. The problem is, that I cannot get the anchor element returned from the "outside" of the web component...
Mosque asked 16/9, 2019 at 19:31

7

Solved

I have an iframe with an inherited pointer-events: none; but when I have inserted a <div> inside the iframe with a pointer-events: auto; the div won't react to clicks or any mouse hover event...
Phraseologist asked 27/4, 2014 at 22:46

8

I want to automate file download completion checking in chromedriver. HTML of each entry in downloads list looks like <a is="action-link" id="file-link" tabindex="0" role="link" href="http://f...
Aegeus asked 23/5, 2016 at 6:59

7

Solved

How can I select nodes within shadow DOM? Consider the following example: structure of "unshadowed" DOM <app-element> #shadow-root <h2></h2> <content> #outside shadow ...
Seto asked 14/4, 2015 at 14:4

1

Solved

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 ...
Trampoline asked 19/9, 2023 at 2:1

3

Solved

I have a chrome extension that injects a shadow dom element to a page to keep the css separate. But I need to bind an onclick to some elements within the shadow dom from a content script because I ...
Edisonedit asked 5/12, 2015 at 23:18

5

Solved

I'm trying to use selenium to automate some actions but am unable to find the first element on the page https://developer.servicenow.com/dev.do and so cannot login from selenium import webdriver fr...

5

Solved

I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck... http://jsfiddle.net/oneeezy/qunbnL6u/ HTML: <input type="number" /> CSS:...
Tovatovar asked 8/8, 2014 at 1:6

3

Solved

I have tried to animate an svg-sprite with CSS. I’ve created a sprite and injected it from gulp: gulp.task('svgstore', function () { var svgs = gulp .src('app/svg/*.svg') .pipe(svgmin(function (...
Benzvi asked 10/12, 2017 at 20:21

2

I would like to use an anchor-element with a hash-URL inside of a custom element that uses shadow DOM. I would expect, that the browser scrolls down to that anchor, but it does not do it (at least ...
Thorazine asked 15/4, 2017 at 11:18

4

Solved

Suppose I created and inserted an element like this <template id="react-web-component"> <span>template stuff</span <script src="/static/js/bundle.js" type="text/javascript">...
Rachealrachel asked 8/8, 2017 at 14:41

4

Say I have a DOM that looks like this in my Document: <body> <div id="outer"> <custom-web-component> #shadow-root (open) <div id="inner">Select Me</div> </cus...
Negron asked 5/9, 2019 at 21:23

7

I have a project where I'm using the shadow DOM natively (not through a polyfill). I'd like to detect if a given element is contained within a shadow DOM or a light DOM. I've looked through all of...
Achromatism asked 12/12, 2014 at 23:16

3

Solved

I'm trying to create custom-element (web component) in svelte 3. I can't find any way to style nested components from css. Svelte removes styles before injecting them to <style> inside of Sha...

2

As alternative solution for https://github.com/vaadin/web-components/issues/5214 we now have styled some css parts in the shadow DOM of the avatar(-group). What I am wondering is: To what extend c...
Rudolph asked 3/1, 2023 at 18:56

4

Solved

I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode() Pseudo code: HTML <element-x> //# shadow...

© 2022 - 2024 — McMap. All rights reserved.