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
113
votes
5 answers

Is it possible to always show up/down arrows for input "number"?

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: CSS: input[type=number]::-webkit-inner-spin-button,…
Oneezy
  • 4,881
  • 7
  • 44
  • 73
97
votes
1 answer

Render content between the component tags

When a component is rendered, content inside it is ignored, for example: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '
{{title}}
', }) export class AppComponent { title = 'app…
LeagueOfJava
  • 1,117
  • 2
  • 9
  • 7
94
votes
2 answers

Is Shadow DOM fast like Virtual DOM in React.js?

Does implementing Shadow DOM in my projects will make them faster like virtual DOM that's used by React?
Hmoo_oomH
  • 1,045
  • 1
  • 9
  • 9
85
votes
1 answer

What do /deep/ and ::shadow mean in a CSS selector?

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow. So, what do /deep/ and ::shadow in a CSS selector mean?
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
82
votes
2 answers

What is the ::content/::slotted pseudo-element and how does it work?

This is impossible to Google for because every article talking about the :before and :after pseudo-elements seems to use the word 'content'. I heard about it in this CSS-Tricks article, explaining how to implement an image slider as an example…
jon
  • 5,961
  • 8
  • 35
  • 43
66
votes
8 answers

Override styles in a shadow-root element

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 updated since April(2017) and there's a pesky bug I'd like…
Andrew
  • 3,393
  • 4
  • 25
  • 43
59
votes
12 answers

Style html,body from web component (Angular 2)

I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page. But just adding a style for the html, body in my login.css doesn't seem to work. Is there a…
Vivendi
  • 20,047
  • 25
  • 121
  • 196
48
votes
3 answers

Does Angular 2 use Shadow DOM or a Virtual DOM?

What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1?
Shivanka
  • 723
  • 2
  • 8
  • 21
48
votes
2 answers

Inspect Shadow DOM with Firefox

Is there a way to inspect Shadow DOM elements in Firefox like you can do with the Chrome dev tools?
Angelo Repole
  • 483
  • 1
  • 4
  • 4
41
votes
2 answers

Does the shadow DOM replace ::before and ::after?

CSS Scoping says The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead. CSS Pseudo-Elements describes…
Oriol
  • 274,082
  • 63
  • 437
  • 513
40
votes
4 answers

Is it possible to access Shadow DOM elements through the parent document?

This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question: Say for example I have a date input on my page. With a couple of bits edited out, the shadow DOM markup for this…
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
39
votes
6 answers

How to query elements within shadow DOM from outside in Dart?

How can I select nodes within shadow DOM? Consider the following example: structure of "unshadowed" DOM #shadow-root

#outside shadow

#shadow-root …
Timur Fayzrakhmanov
  • 17,967
  • 20
  • 64
  • 95
37
votes
1 answer

Difference between constructor and connectedCallback in custom elements v1

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with scoped styles. When I was…
Shashank
  • 503
  • 1
  • 5
  • 7
36
votes
7 answers

How can I tell if an element is in a shadow DOM?

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 the properties on the elements, but there don't seem…
Jeremy
  • 1
  • 85
  • 340
  • 366
34
votes
1 answer

How to create LitElement without Shadow DOM?

I am creating a web components using LitElement. This is from https://lit-element.polymer-project.org/guide/start // Import the LitElement base class and html helper function import { LitElement, html } from 'lit-element'; // Extend the LitElement…
user7331530
  • 815
  • 1
  • 12
  • 21
1
2 3
…
99 100