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
22
votes
2 answers

Are duplicate IDs allowed in separate shadow roots?

tl;dr: Is it valid to have two elements with the same ID attribute, as long as both are under separate shadow roots? Would screen readers handle aria-labelledby correctly in such situation? For example, consider this custom element: (function ()…
kamituel
  • 34,606
  • 6
  • 81
  • 98
22
votes
2 answers

Correct way to apply global styles into Shadow DOM

This questions is similar to some other on StackOverflow, but I couldn't find any answer describing applicable to my situation and non-deprecated method (and I'm starting thinking that maybe there is no any good solution for that situation). Let's…
Dmitry Bezzubenkov
  • 609
  • 1
  • 6
  • 15
22
votes
4 answers

Use a remote stylesheet inside a template tag (with shadow dom)

I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am…
dtracers
  • 1,534
  • 3
  • 17
  • 37
22
votes
10 answers

Can I access the shadow DOM using jQuery?

I defined a component with polymer like this: Now I want to access the shadow dom, for example: to get the content of div…
mica
  • 3,898
  • 4
  • 34
  • 62
21
votes
5 answers

Inject CSS styles to shadow root via Webpack

I am attempting to modify the styles of web component that created with shadow root. I see that the styles are added to a head tag but it has no effect on the shadow root as it's encapsulated. What i need is to load the styles of all components and…
albertR
  • 321
  • 1
  • 3
  • 6
21
votes
9 answers

Accessing Shadow DOM tree with Selenium

Is it possible to access elements within a Shadow DOM using Selenium/Chrome webdriver? Using the normal element search methods doesn't work, as is to be expected. I've seen references to the switchToSubTree spec on w3c, but couldn't locate any…
lambinator
  • 10,616
  • 7
  • 55
  • 57
20
votes
3 answers

How to get element in user-agent shadow root with JavaScript?

I need get elements from Shadow DOM and change it. How i can do it?
Yaroslav Polubedov
  • 1,352
  • 2
  • 11
  • 13
20
votes
2 answers

How can I clone a ShadowRoot?

I'm trying to clone a shadow root, so that I may swap instances of with their corresponding distributed nodes. My approach: var shadowHost = document.createElement('div'); var shadowRoot = shadowHost.createShadowRoot(); var…
Vix
  • 1,046
  • 10
  • 16
20
votes
2 answers

Using querySelector to find nested elements inside a Polymer template returns null

I'm trying to use paper-tabs inside new element (tabs-list) but after print tabs I can't use querySelector to change selected one. Element code (without style):
Albert Hornos
  • 215
  • 1
  • 2
  • 7
20
votes
1 answer

To what degree can the Shadow DOM be emulated using a polyfill?

Can the Shadow DOM W3C draft be polyfilled in JavaScript by providing custom functions for searching and traversing the DOM? Has this been done? The attempts I've found have been rather meek shims and appear not to make much effort to emulate the…
Patricia Brothers
  • 243
  • 2
  • 5
19
votes
6 answers

Why doesn't Font Awesome work in my Shadow DOM?

Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out: :host { all: initial; /* 1st rule so subsequent properties are reset. */ display: block; contain: content; /* Boom.…
cryptojesus
  • 375
  • 1
  • 2
  • 9
19
votes
3 answers

Check if element contains #shadow-root

Is it possible to see if a Shadow DOM element exists? I'm not too concerned with manipulating it, or even really targeting it per-say. I understand the reasoning of the encapsulation. But I'd like to be able to style other elements in the regular…
Chase
  • 2,051
  • 2
  • 21
  • 26
19
votes
2 answers

How to create a cross-browser sub document with iframe or shadow dom?

I want to create a totally encapsulated sub-document in JavaScript, with its own , , styles, html, and js. Basically a shadow dom, or an iframe, but without an src attribute. Though I love the idea of shadow dom, its support is very low,…
dezman
  • 18,087
  • 10
  • 53
  • 91
19
votes
5 answers

How to add a component programmatically in Angular.Dart?

I would like to dynamically build a component tree basing on some information received from AJAX calls. How to programmatically add a component to the DOM from inside of other component? I have and I would like, basing on some logic,…
Michal Pietrusinski
  • 343
  • 2
  • 9
18
votes
4 answers

How to interact with the elements within #shadow-root (open) while Clearing Browsing Data of Chrome Browser using cssSelector

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 Clear browsing data popup, which appears while…
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
1 2
3
…
99 100