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
-1
votes
1 answer

Javascript on click focus latest element with multiple customelements

I have a customelement WebDesktop that can create another customelement AppWindow. If I create several AppWindow I would like the one I clicked the last to be "focused" when it's created but also that if I click on an already created one it should…
FatDog
  • 153
  • 1
  • 9
-1
votes
2 answers

injecting dynamic html inside the components from index.html in angular 8

I am working on a web app. which has magnolia as CMS. i am still new here but i will explain the scenario. magnolia is providing the index.html which has reference of the components.But for some of those components it also provides some additional…
Vikas Dubey
  • 320
  • 3
  • 5
  • 15
-1
votes
1 answer

Material Icons are not Loading in Hyperhtml

I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing. This is My Implementation. const appIframeRender =…
Al Ameen
  • 312
  • 3
  • 9
-1
votes
1 answer

React, .. xlinkHref no longer works with Chrome v71

I've had a React SVG component that had been working fine for the last year... In my SVG component, I have a tag like so: { this.arcRef.icon = ref; }} xlinkHref={this.props.xlinkHref} width="10" …
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
-1
votes
1 answer

How can I place slotted elements into css grid?

My HTML is like this:
I have formatted the above with CSS like this: #grid-container { display: grid; } However, the items that I filled into the slot seem to be out of…
Jinghui Niu
  • 990
  • 11
  • 28
-1
votes
1 answer

Click Record Button at about:tracing through Selenium

I am trying to click the Record button through Selenium in Google Chrome. However I am not able to. Element is not found. I have tried using id and xpath. None of them worked. WebElement record =…
leocrimson
  • 702
  • 1
  • 11
  • 25
-2
votes
1 answer

Modify shadow root on css

I'm trying with a thousand different css rules, but I can't find any that do what I require. I have a desire to edit a custom element in my css file after it is placed in the dom, but I can't, how can I do? If there is already a question asked, I…
Francesco Pauselli
  • 27
  • 7
-2
votes
1 answer

::after is not working in shadowroot (web component). I am trying to give some styling after div. Any workaround?

::after is not working in shadowroot (web component). I am trying to give some styling after div. Any workaround? After i am trying to give arrow. This is coming under #shadow-root. For that i have written the following css: But unfortunately it…
sumit bhatnagar
  • 1
  • 1
-2
votes
1 answer

How do Web Components and the Shadow DOM prevent leaky CSS across components?

In 2008 our team investigated GWT - a technology for writing web components for Javascript in Java which would compile down. A new member of the team said: You will have a problem with the CSS of the component and the page clashing with each…
hawkeye
  • 34,745
  • 30
  • 150
  • 304
-2
votes
1 answer

Query slotElement.assignedNodes() results

I want to query elements inside of my shadow dom slot element. Do I need to loop through what assignedNodes() returns and parse them myself?
Aaron
  • 93
  • 7
-2
votes
1 answer

Why does shadow dom hide html elements in inspect mode?

Shadow Dom doesn't reveal the source code on this website, monday.com. How do I fix this?
Hung Trinh
  • 71
  • 2
  • 2
  • 8
-3
votes
1 answer

How to clear hidden input value in javascript?

await browser.executeScript("document.querySelector(\"body > moo-shell > auto-app\").shadowRoot.querySelector(\"section > auto-farms\").shadowRoot.querySelector(\"section:nth-child(2) > auto-farm\").shadowRoot.querySelector(\"section:nth-child(2) >…
sudeep
  • 1
  • 2
-3
votes
1 answer

Polymer: change property of different instances of an element

I'm trying to create a method/function inside my polymer element that allows me to change a property to all instances except the one clicked/tapped. Being more specific, when I click on an instance of the element, I want to change a CSS property of…
iroyo
  • 723
  • 7
  • 23
-4
votes
4 answers

How to extract a websites HTML tags in DOM and shadowDOM

I'm trying to get the html structure of multiple websites using NodeJS, and I'm having difficulties. I want to get just the HTML structure of the document, and no content. I want to preserve classes, IDs, and other attributes. Example of what I want…
Brad
  • 2,237
  • 5
  • 41
  • 69
1 2 3
…
99
100