Menu
In Google Chrome’s Developer Tools, I see a #shadow-root right under <html lang="en"> tag. what does it do and what is it used for? I don’t see it in Firefox nor in IE; only in Chrome, is this a special feature?
If I open it, it shows <head> and <body> and a link beside named reveal, by clicking, it points to the <head> and <body>, nothing else.
676
A shadow root is a technique that is used to customize color and achieve a perfect blend after lightening. Like a root smudge, the shadow root diminishes the lines of demarcation between the root and the lightened hair.
Root shadowing is a low-maintenance hair color technique in which a darker shade is applied directly to the roots giving a soft, seamless contrast. It's a great way to refresh your look and give your hair color depth and dimension.
Balayage and shadow root may appear similar, especially on shoulder-length hair. However, these two techniques are diametrically opposed. To put it simply, balayage lightens the lower part of your hair, or some of its parts (think face-framing highlights), while shadow root makes the roots darker.
Because shadow roots start with your natural hair, it actually provides you with the ability to grow out your hair as long as you want. You don't need to re-dye your roots as often, which saves a lot of time, cost and effort. On average, shadow roots only require re-dying every three months.
This is a special indicator that a Shadow DOM exists. These have existed for years, but developers have never been given APIs into it until recently. Chrome has had this functionality for a while, other browsers are still catching up. It can be toggled in the DevTools Settings under the "Elements" section. Uncheck the "Show User Agent Shadow DOM". This will at least hide away any Shadow DOMs created internally (like select elements.) I am unsure right away if it affects user-created ones, such as custom elements.
These come up in things like iframes as well, where you have a separate DOM tree nested inside of another.
The Shadow DOM is simply saying that some part of the page, has its own DOM within it. Styles and scripting can be scoped within that element so what runs in it only executes in that boundary.
This is one of the primary pieces needed for Web Components to work. Which is a new technology allowing developers to build their own encapsulated components that developers can use just like any other HTML element.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
