Stack Overflow
Stack Overflow

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.

Shadow DOM gives you access to native implementations of markup, and therein the power to edit, and create your own.

Shadow DOM is defined within the DOM Standard at https://dom.spec.whatwg.org/#shadow-trees

See also:

1500 questions
33
votes
1 answer

::slotted CSS selector for nested children in shadowDOM slot

The CSS ::slotted selector selects children of the element. However, when trying to select grandchildren like with ::slotted(*), ::slotted(*) *, or ::slotted(* *), the selector doesn't seem to take effect. class MyElement extends…
Mendy
  • 7,612
  • 5
  • 28
  • 42
32
votes
4 answers

What's the substitute for ::shadow and /deep/?

The two shadow-piercing combinators have been removed, as stated in https://www.chromestatus.com/features/6750456638341120 So, what's the substitute for achieving the same thing? Or has this shadow-piercing feature been completely abandoned?
Zhengquan Bai
  • 1,057
  • 3
  • 14
  • 31
31
votes
2 answers

What is the difference between open and closed shadow DOM encapsulation mode?

I want to create a shadow DOM for an element so I can display elements for a Chrome extension without the page styles affecting them. When I looked at the documentation for Element.createShadowRoot I saw it was deprecated so I checked out…
metarmask
  • 1,747
  • 1
  • 16
  • 20
31
votes
5 answers

Click event not firing when React Component in a Shadow DOM

I have a special case where I need to encapsulate a React Component with a Web Component. The setup seems very straight forward. Here is the React Code: // React Component class Box extends React.Component { handleClick() { alert("Click…
josephnvu
  • 1,210
  • 1
  • 9
  • 14
30
votes
2 answers

How to listen for custom events defined web component

I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so: constructor(){ super(); this._shadowRoot =…
rakitin
  • 1,943
  • 6
  • 25
  • 51
29
votes
6 answers

How to automate shadow DOM elements using selenium?

I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method. I have tried the following solutions: deep css…
SushilG
  • 655
  • 1
  • 6
  • 19
29
votes
4 answers

Shadow DOM styling from the outside

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 shadow DOM. How I can do this? Previously there were…
Okavango
  • 359
  • 1
  • 3
  • 6
28
votes
1 answer

Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?

In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element. Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay.…
Robert Yang
  • 381
  • 2
  • 5
28
votes
2 answers

Is the use of CSS generated content (i.e. pseudo elements) more efficient (i.e. parsed/rendered faster) than adding more DOM elements?

In order to keep my mobile web app lean and efficient, I'm trying to limit the number of elements on the DOM at any given time. One way in which I intend to limit the use of DOM elements, is by using the pseudo :before and :after elements to…
BigMacAttack
  • 4,479
  • 3
  • 30
  • 39
26
votes
1 answer

What does :host /deep/ selector mean?

Please explain in a straightforward way what :host /deep/ means: :host /deep/ .ui-autocomplete { width: 85%; }
Pismotality
  • 2,149
  • 7
  • 24
  • 30
25
votes
2 answers

CSS selector for shadow root or all top level elements in shadow root

I need a selector for usage in css inside a shadow root, which selects all children (but not grand children) of the shadow root, no matter what tag they are and without giving them an ID. In the example below, SPAN,A,P and DIV should get a red…
Michael K
  • 1,070
  • 1
  • 10
  • 25
25
votes
2 answers

Difference between Light DOM and Shadow DOM

I stumbled a couple of times into this Light DOM thing but wasn't able to understand the difference with Shadow DOM. If someone out there could provide a clear answer it would be much appreciated.
theFreedomBanana
  • 2,462
  • 2
  • 22
  • 29
25
votes
2 answers

Get shadow root host element

When inserting a script into the shadow root of an element is there a way to refer to the host element? var element = document.createElement('div'); var script = document.createElement('script'); script.innerHTML = 'console.log(host)'; // << How to…
Bart
  • 17,070
  • 5
  • 61
  • 80
24
votes
6 answers

How to use global css styles in shadow dom

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 used across all pages (e.g.: font-family, h1, h2,…
Jiubao
  • 241
  • 1
  • 2
  • 3
24
votes
2 answers

Inspect HTML5 date picker shadow DOM

I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too. I've found…
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
1
2
3
…
99 100