Dimitri Glazkov

From HTML5 to Gibson’s Matrix?May 2009I shouldn’t admit it, but — what the heck. I haven’t read…What the Heck is Shadow DOM?

component model, platform, web, webkit
· 7 min read

If you build Web sites, you probably use Javascript libraries. If so, you are probably grateful to the nameless heroes who make these libraries not suck.

Live as our customer2023This principle is something that feels very intuitive at first blush, but…One common problem these brave soldiers of the Web have to face is encapsulation. You know, one of them turtles on which the Object-Oriented Programming foundation sits, upon which stands most of the modern software engineering. How do you create that boundary between the code that you wrote and the code that will consume it?

With the exception of SVG (more on that later), today’s Web platform offers only one built-in mechanism to isolate one chunk of code from another — and it ain’t pretty. Yup, I am talking about iframes. For most encapsulation needs, frames are too heavy and restrictive.

What do you mean I must put each of my custom buttons in a separate iframe? What kind of insane are you?

Shadow Gristle2023I’ve been writing a bit of Web components code recently and used…So we need something better. Turns out, most browsers have been sneakily employing a powerful technique to hide their gory implementation details. This technique is called the shadow DOM.

My name is DOM, Shadow DOM

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. Consider a simple slider:

<input id="foo" type="range">

Pop this code into any WebKit-powered browser, and it’ll appear like so:

Typical Slider Control on WebKit

Simple enough. There’s a slider track and there’s a thumb, which you can slide along the track.

Wait, what? There’s a separate movable element inside of the input element? How come I can’t see it from Javascript?

var slider = document.getElementsById("foo");
console.log(slider.firstChild); // returns null

Is this some sort of magic?

No magic, my fair person of the Web. Just shadow DOM in action. You see, browser developers realized that coding the appearance and behavior of HTML elements completely by hand is a) hard and b) silly. So they sort of cheated.

Behavior over time graphing tool2022It was an interesting adventure. From the start, I wanted to go…They created a boundary between what you, the Web developer can reach and what’s considered implementation details, thus inaccessible to you. The browser however, can traipse across this boundary at will. With this boundary in place, they were able to build all HTML elements using the same good-old Web technologies, out of the divs and spans just like you would.

Some of these are simple, like the slider above. Some get pretty complex. Check out the video element. It’s got trigger buttons, timelines, a hover-appearing volume control, you name it:

WebKit Video Element With Controls

All of this is just HTML and CSS — hidden inside of a shadow DOM subtree.

Call Me Gearhead2007Let’s pretend that I have a Web site that wants to use…To borrow a verse from that magnetic meme duo, “how does it work?” To build a better mental model, let’s pretend we have a way to poke at it with Javascript. Given this simple page:

<html>
<head>
<style> p { color: Green; } </style>
</head>
<body>
<p>My Future is so bright</p>
<div id="foo"></div>
<script>
    var foo = document.getElementById('foo');
    // WARNING: Pseudocode, not a real API.
    foo.shadow = document.createElement('p');
    foo.shadow.textContent = 'I gotta wear shades';
</script>
</body>
</html>

We get the DOM tree like this:

<p>My Future is so bright</p>
<div id="foo"></div>

But it is rendered as if it were this:

<p>My Future is so bright</p>
<div id="foo"> <!-- shadow subtree begins -->
    <p>I gotta wear shades</p>
</div> <!-- shadow subtree ends -->

Or visually like so:

Shadow DOM Example

Notice how the second part of the rendered sentence is not green? That’s because the p selector I have in my document can’t reach into the shadow DOM. How cool is that?! What would a framework developer give to have powers like this? The ability to write your widget and not worry about some random selector fiddling with your style seems … downright intoxicating.

Course of Events

To keep things natural, events fired in shadow DOM subtree can be listened to in the document. For instance, if you click on the mute button in the audio element, your event listeners on an enclosing div would hear the click:

<div onclick="alert('who dat?')">
    <audio controls src="test.wav"></audio>
</div>

However, if you ask to identify who fired the event, you’ll find out it was the audio element itself, not some button inside of it.

<div onclick="alert('fired by:' + event.target)">
    <audio controls src="test.wav"></audio>
</div>

Why? Because when crossing the shadow DOM boundary, the events are re-targeted to avoid exposing things inside of the shadow subtree. This way, you get to hear the events, fired from the shadow DOM, and the implementor gets to keep their details hidden from you.

Reaching into Shadows with CSS

One other trick up the sleeve is the ability to control how and whether CSS reaches into the shadow subtree. Suppose I want to customize the look of my slider. Instead of the standard OS-specific appearance, I want it be stylish, like so:

input[type=range].custom {
    -webkit-appearance: none;
    background-color: Red;
    width: 200px;
}

The result I get is:

Slider with a custom-styled track

Ok, that’s nice, but how do I style the thumb? We already determined the that our usual selectors don’t go into the shadow DOM tree. Turns out, there’s a handy pseudo attribute capability, which allows shadow DOM subtrees to associate an arbitrary pseudo-element identifier with an element in the subtree. For example, the thumb in the WebKit slider can be reached at:

input[type=range].custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: Green;
    opacity: 0.5;
    width: 10px;
    height: 40px;
}

Which gives us:

Fully custom-styled slider

Ain’t it great? Think about it. You can style elements in the shadow DOM without actually being able to access them. And the builder of the shadow DOM subtree gets to decide which specific parts of their tree can be styled. Don’t you wish you had powers like this when building your UI widget toolkit?

Shadows with Holes, How’s that for a Mind-bender?

Speaking of awesome powers, what happens when you add a child to an element with a shadow DOM subtree? Let’s experiment:

// Create an element with a shadow DOM subtree.
var input = document.body.appendChild(document.createElement('input'));
// Add a child to it.
var test = input.appendChild(document.createElement('p'));
// .. with some text.
test.textContent = 'Team Edward';

Displaying as:

Input Element and Nothing Else

Caring for elephants2022When Javascript was first introduced to the Web, the API to access…Whoa. Welcome to the twilight DOM — a chunk of document that’s accessible by traversal but not rendered on the page. Is it useful? Not very. But it’s there for you, if you need it. Teens seem to like it.

But what if we did have the ability to show element’s children as part of its shadow DOM subtree? Think of the shadow DOM as a template with a hole, through which the element’s children peek:

// WARNING: Pseudocode, not a real API.
var element = document.getElementById('element');
// Create a shadow subtree.
element.shadow = document.createElement('div');
element.shadow.innerHTML = '<h1>Think of the Children</h1>' +
    <div class="children">{{children-go-here}}</div>';
// Now add some children.
var test = element.appendChild(document.createElement('p'));
test.textContent = 'I see the light!';

TILT: How to Stop Feeling Bad About Using Tables for Layout and Start Enjoying Your Markup2005<div id="Page"> <h1 class="Title">Your Company Name</h1> <ul class="Tools"> <li> <a href="#">Home</a> </li>…As a result, if you traverse the DOM you will see this:

<div id="element">
    <p>I see the light</p>
</div>

But it will render like this:

<div id="element">
    <div> <!-- shadow tree begins -->
        <h1>Think of the Children</h1>
        <div class="children"> <!-- shadow tree hole begins -->
            <p>I see the light</p>
        </div> <!-- shadow tree hole ends -->
    </div> <!-- shadow tree ends -->
</div>

As you add children to element, they act as normal children if you look at them from the DOM, but rendering-wise, they are teleported into a hole in the shadow DOM subtree.

This is the point where you admit that this is pretty cool and start asking:

When can I have it in my browser?

Homework Assignment

Did you think you’d read through all this preaching and get away without homework? As a Javascript library or framework developer, try to think of all the different great things having shadow DOM would allow you to do. Then think of specific use cases (actual/pseudo code a plus) of where shadow DOM could be applied. To help you get your thinking groove going, here is current list of use cases.

Margin Marks UI Concept2007This concept is inspired by the entire super-awesome premise of microformats and…Finally. share your use cases on public-webapps mailing list. The discussion about adding these capabilities to the Web platform is under way and your help is needed.

If you aren’t a much a framework writer, you can still participate — by cheering for the shadow DOM and spreading the joy on your favorite social networking site. Because joy is what’s it’s all about.

PS. SVG and Shadow DOM

Tension between graphs and trees2022Not sure how, last week I stumbled onto my Shadow DOM diaries…Going Forward Is Leaving Past BehindApril 2014Greetings, hypothetical Web app developer. So I wrote this thing. It’s for…Vision-oriented and impact-oriented mindsetslinks here, 2022By the way, this fusing of vision with identity is a good…Almost forgot. Believe it or not, SVG has actually had shadow DOM since the beginning. The trouble is, its shadow DOM is very… shady. No, that’s not it. There’s another qualifier that also begins with “sh” and ends with a “y”. Yeah, that one. I could go on, but trust me on this. Or read the spec.

Show 224 comments

  1. Peter Beverloo · January 14, 2011

    There is one major flaw with cross-browser compatibility for the CSS pseudo-element approach, which is that one invalid selector will cause the entire rule to be dropped. Suppose Mozilla implements the slider-thumb pseudo as well, CSS like this would be impossible:

    input[type=range].custom::-webkit-slider-thumb, input[type=range].custom::-moz-slider-thumb
    {
    properties
    }

    This is behavior which has been in CSS since forever, used for hacks and therefore not likely to change. I addressed the problem a couple of months ago on www-style myself.

    The Shadow DOM itself is great, of course. I’ve seen the patches come by 🙂

    1. Random guy 246783 · April 30, 2015

      I came across this and hung my head at realising it lead towards duplication.
      But between CSS autoprefixer and SASS mixins it’s actually really easy to solve.

  2. Drew Marsh · January 14, 2011

    This is exactly how IE’s HTML components (aka behaviors) implementation worked. This is also how Microsoft’s WPF works. They refer to them as the Visual Tree and the Logical Tree. Had the HTML components proposal from 1998[1] ever been adopted and carried forward we’d all be living in a better world. Amazed that we still have now standard control model to this day.

    [1] http://www.w3.org/TR/NOTE-HTMLComponents

  3. Brad Neuberg · January 15, 2011

    When you mention SVG’s shadow DOM, do you mean the svg:use tag?

    1. Dimitri Glazkov · January 15, 2011

      Yes!

      1. shepazu · January 15, 2011

        Okay, Dmitri, here’s your homework. Tell the SVG WG exactly what you don’t like about the SVG shadow DOM, and how you would want it to work instead. We’ll fix it in SVG 2.

        For historical perspective, SVG defined the shadow DOM over a decade ago, so it’s not surprising that some tweaks are needed.

        Nice article, btw… I’ve always liked the shadow DOM, and even just a few years ago, it was utterly reviled by browser developers. So, I’m glad to see it get some props (like the rainbow it is).

        1. Dimitri Glazkov · January 15, 2011

          Yes sir! 🙂

      2. Peter Sorotokin · January 17, 2011

        SVG tried to invent proper shadow DOM long time ago (called “RCC”) and we even implemented it in Adobe SVG viewer, but it went nowhere in W3C: http://www.w3.org/TR/2003/WD-SVG12-20030715/#rcc-dom

  4. Kurtextrem · January 15, 2011

    Wow, really cool. I didn’t know this until now 😀

  5. Sergey Ilinsky · January 15, 2011

    Dimitri, did you hear about Ample SDK http://www.amplesdk.com/ ? It does nicely pretty much what you are discussing here on top of the existing technologies (HTML4+CSS1+DOM0). Basically it creates and maintains its own DOM (with standard L2 APIs) out of XUL, SVG or any other markup document included (or referenced) in an HTML webpage in . Indeed the events propagation works in this DOM. For example in case of SVG the host tree will only contain SVG nodes, but the shadow in case of IE, for example, will contain VML nodes (see http://www.amplesdk.com/examples/markup/svg/tiger/ in IE6, for exmple). With XUL everything is rendered in shadow tree using HTML4 (see http://www.amplesdk.com/examples/markup/xul/views/). The developer interacts with Ample SDK DOM through “ample” object which is the “document” object of Ample SDK.

    Next to the benefit of browser-independent DOM re-implemented, developer can also use many “new” features of CSS, such as pseudo-elements classes to reach out shadow DOM if needed and so on. See tutorial for details http://www.amplesdk.com/tutorials/adg/

    1. Dimitri Glazkov · January 15, 2011

      I am familiar with Ample — and kudos! You are definitely on my “framework hero” list. I should’ve linked to it in my post. But what Ample does is a hack, approaching horrifying proportions. You are basically building a rendering engine inside of a rendering engine. Yes, you are enabling new capabilities, but they come at the expense of performance, latency, and just plain living in a detached layer that has little to do with what is really going in the renderer. And yes, I totally understand why you’re doing it and even support it, because supplying an even ground in today’s browser landscape is just tough.

      Finally, with your skills, you should stop worrying about the legacy browsers and start hacking on the actual rendering engines instead. Like WebKit. Or Gecko. Let me know if you’re interested 🙂

  6. Harp B · January 15, 2011

    As a developer, I hate them because I can’t style them to my will…
    For example, I want to skin the arrow in select-element, but I am not allowed to do. In order to do it, I have to emulate same behaviour of select, using div’s and other elements.

  7. Top Posts — WordPress.com linked here · January 15, 2011

    […] What the Heck is Shadow DOM? If you build Web sites, you probably use Javascript libraries. If so, you are probably grateful to the nameless heroes […] […]

  8. Martin · January 15, 2011

    Just out of curiosity, is there any way to find out which elements that lies within the Shadow DOM? For example, I haven’t been able to find a way to access the up & down buttons of an input type=”number” in JS. Could this be because they lie in the Shadow DOM?

    1. Dimitri Glazkov · January 15, 2011

      The way to do this is by studying the code. For example, in WebKit the magic is currently in TextControlInnerElements.cpp (http://www.google.com/codesearch/p?hl=en#OAMlx_jo-ck/src/third_party/WebKit/WebCore/rendering/TextControlInnerElements.cpp&q=SpinButtonElement&exact_package=chromium&l=260) and RenderTextControlSingleLine.cpp (http://www.google.com/codesearch/p?vert=chromium#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/rendering/RenderTextControlSingleLine.cpp). But don’t expect it to be here for long — we’re planning a rather large refactoring of this code soonish.

  9. Implementing iPhone’s slider unlock with input type=”range” | David B. Calhoun – Developer Blog linked here · January 16, 2011

    […] reading “What the Heck is Shadow DOM?” I was inspired to see how far I could style the <input type="range"> element. […]

  10. CSS Variables and mixins, Interactive Validation and prerendering « Peter Beverloo linked here · January 17, 2011

    […] Thursday, Kent Tamura landed support for the Interactive Validation UI using the new Shadow DOM model. With most bugs out of the way, messages and an –albeit internal– API being available […]

  11. links for 2011-01-17 « General Musing linked here · January 17, 2011

    […] What the Heck is Shadow DOM? « Dimitri Glazkov An interesting article about the hidden elements in the DOM. (tags: shadow dom javascript html) […]

  12. Revision 10: H.264 vs. WebM, Shadow DOM und w3fools.com | Working Draft linked here · January 18, 2011

    […] What the heck is Shadow DOM? […]

  13. egenergy · January 19, 2011

    But if you can’t access this “Shadow DOM” stuff then how does the Shadow DOM really matter? Forgive me if I missed something. Can people actually make re-usable custom components that are tucked into the shadows of the Shadow DOM?

    1. Jordan Gray (@jordangray) · August 6, 2011

      Use case: you are creating a reusable custom control out of conventional HTML elements. (For example, a fancy select box, or a calendar control.)

      Problem 1: the elements that comprise your clever control are affected by external stylesheets, perhaps in ways that will break them horribly.

      Problem 2: other JavaScripts that do clever stuff might accidentally interact with your controls in ways that you would prefer they couldn’t.

      Solution: the Shadow DOM will let you build a DOM subtree that cannot be touched by CSS and JavaScript through conventional means.

  14. Dom · January 20, 2011

    The link to the public-webapps mailing list is broken, should be http://lists.w3.org/Archives/Public/public-webapps/

  15. Marjolein Katsma · January 20, 2011

    Very cool, and pretty mind-boggling when it gets to ‘holes’ – I’ll have to read that again!

    Could we please have a working link to the ‘current list of use cases’ – or have they actually disappeared?

  16. Marjolein Katsma · January 20, 2011

    Oh good, it seems the link to the ‘current list of use cases’ (or its target) has been repaired!

  17. The Shadow DOM linked here · January 20, 2011

    […] elements, only they are behind a bit of a glass wall. You can see, but not touch. Direct Link to… [full post] Chris Coyier CSS-Tricks link 0 0 0 0 0 [20 […]

  18. The Shadow DOM | The Web Design Development Company | Web Design | Web Development | SEO Based Website Designers linked here · January 20, 2011

    […] here to read the rest: The Shadow DOM No Responses to “The […]

  19. Stephan · January 21, 2011

    So the SVG shadow DOM is shy?

  20. JavaScript Magazine Blog for JSMag » Blog Archive » News roundup: Twitter onscroll performance, Ace editor, CSSOM, Modernizr 2.0 beta linked here · January 21, 2011

    […] has a logo: you’ve probably heard about this by now… What the Heck is Shadow DOM? is a look at parts of the DOM only accessible by the browser itself, but sometimes styleable. Case […]

  21. RussellUresti · January 21, 2011

    -webkit-slider-thumb pseudo class??? Please tell me there’s a list of these things out there; I’d love the ability to reskin the native video controls.

  22. namluong · January 21, 2011

    Dịch vụ rút gọn link của goolge
    http://goo.gl/g2DdB

  23. My Stream » The Shadow DOM linked here · January 22, 2011

    […] Originally posted from: The Shadow DOM […]

  24. The Shadow DOM | Silver-Tab.com linked here · January 22, 2011

    […] Direct Link to Article — Permalink […]

  25. Doug · January 27, 2011

    Interesting idea, allowing component creators to have the ability to create “shadow DOM” elements, but, I don’t see any compelling argument for it. The ability to encapsulate a “component” is indeed important, but, to that end, you only mention JavaScript events and CSS. As far as JavaScript event encapsulation, it’s already possible to trap events at a specific DOM element and to have events originate from a given element, so, that is not an issue. CSS encapsulation? That is a valid issue, but, it is an issue with CSS (being addressed by CSS3 no less), not a reason to add a component model to browsers.

  26. Linkdump for February 1st at found_drama linked here · February 1, 2011

    […] What the Heck is Shadow DOM? at Dimitri Glazkov (tagged: javascript css html5 webdev DOM ) […]

  27. Type-Style · February 2, 2011

    Thats awesome!
    I am just a little web-developer who is interested in those things.

    My current challenge style the html5 progress tag in opera. This Shadow DOM seems like “42” to my question.
    Where is the green coming from?

    Is there a way of finding the super crazy pseudo selector to figure out where the color in the browser is controlled?

  28. France · February 3, 2011

    It occurs to me that content added via pseudo-elements :before and :after can be considered Shadow DOM.

  29. mannclay · March 15, 2011

    Is that true, that the :before and :after are Shadow DOM?? Awesome…

    1. Dimitri Glazkov · March 17, 2011

      At least in WebKit, the content property is implemented by injecting rendering objects directly, without DOM. So in this particular case, there is no shadow DOM involved.

  30. shadow DOM | Jen's Webstek linked here · April 3, 2011

    […] link tip: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  31. Custom Scrollbars in WebKit / Weblog – Hans van Goor linked here · May 2, 2011

    […] now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the “Shadow DOM“. This has been around for a couple of years. David Hyatt blogged it in early 2009 and put […]

  32. ScrollBars Personalizadas – Taringa! Buzz linked here · May 11, 2011

    […] pero es hora de Webkit. Es un poco mejor ahora ya que estan prefijadas para webkit y usan el shadow-DOM , esto ha sido hace un par de años, David Hyatt lo bloggeo y puso junto unos ejemplos de las […]

  33. Revision 25: Visibility API und Chromebooks | Working Draft linked here · May 17, 2011

    […] aktuelle Canary-Build von Chrome zeigt seit neustem alle zu einem Element gehörigen Shadow-DOM-Elemente. Damit lässt sich also herausfinden, wie man per CSS an in HTML-Elementen steckende […]

  34. David Calhoun · June 7, 2011

    Just an update on this – Chrome now lets users see the shadow DOM! http://peter.sh/2011/05/inspectable-shadow-dom-the-file-browser-and-new-default-avatars/

  35. Martin Atkins · June 16, 2011

    Mozilla’s XBL system exposes a mechanism like this to developers, which is used to implement the XUL widgets that make up the UI of Mozilla’s apps.

    It would be awesome to see a facility like this standardized across browsers for use in web pages.

    Mozilla tried to write a specification for such a thing:
    http://www-archive.mozilla.org/projects/xbl/xbl2.html

    1. Kristian Sons · July 10, 2011

      XBL 2.0 is also W3C Candidate Recommendation:
      http://www.w3.org/TR/xbl/

      Just no one implemented it yet. At least in the Browsers. There is a JS implementation from Sergey (above):
      http://code.google.com/p/xbl/

      Although XBL was designed with other intention than those of the WebApps WG, this concept of templating reusable components and bind them to implementations is very nice. Through the interface it provide well-defined access to the shadow tree, as well as events. And it’s based on the experiences made with XBL1.0 in XUL (or even remade from scratch?). Thus if there are shadow trees in the rendering engine already, why not expose them to all users to create reusable components?

  36. Revision 38: Gridsysteme und Best Practices | Working Draft linked here · August 30, 2011

    […] WHATWG wiederum möchte mit dem Component Model den Wildwuchs in Sachen Shadow DOM beseitigen und standardisierte Schnittstellen zum Befüllen desselben […]

  37. Lodewijk Andre de la Porte · September 1, 2011

    A shadow dom would hide complexity from the programmer. Complexity is basically the worst enemy you can have. Picture for yourself how hard something would get to debug when it also has many property’s that are inaccessible once set (a shadow dom would be that).

    The way to writing more functional and bugfree apps is not abstracting complexity, it’s removing complexity. I think the added complexity of a shadow dom would not be a good idea. I do think standardizing the look and customisability of the elements we have now would be a good idea (like what happened to buttons, sort of). HTML + CSS + Javascript is about dynamic interactive applications, not about structured data anymore. If you ask me there should be a single standardized browser css template, and a collection of public domain fonts that are enforced be included.

    Bah!

  38. WebKitを使ってスクロールバーをカスタマイズ - CSSPRO linked here · September 7, 2011

    […] 最近になって再びスクロールバーをカスタマイズすることが出来るようになりましたが、今回は非標準CSSではなくWebKitを使うことになります。プロパティはベンダープレフィックス（::-webkit-scrollbarなど）で、シャドウＤＯＭを使用しています。この方法が使われるようになって数年経ちますが、ディビッド・ハイアットさんが2009年の初めにブログで記事にしており、考え付くであろう全てのサンプルを掲載されています。 […]

  39. simurai (@simurai) · September 12, 2011

    I tried to style a Number Input element: http://lab.simurai.com/css/umbrui But something I just couldn’t figure out.. how to style the up/down buttons individually? Is there some secret pseudo element for each of them? The ::spin-button only affects them both together.

  40. JavaScript Reference Links | kabayview.com linked here · October 10, 2011

    […] What the Heck is Shadow DOM? – Dimitri Glazkov […]

  41. Microdata, the Web Component Model and hybi-17 for Web Sockets « Peter Beverloo linked here · October 18, 2011

    […] Model provides programmatic ways to ways to build components, utilizing features such as the Shadow DOM, templates and the ability to create your own elements. It layers a declarative form of the same […]

  42. HTML Component Model & the Shadow DOM | Bram.us linked here · October 25, 2011

    […] Fronteers ’11 Alex Russel gave a great talk about the Shadow DOM (presentation starting from slide […]

  43. 大形尚弘 (@oogatta) · February 2, 2012

    A Great article on a great implementation of a great idea. I must love Web Components.

    Can I translate this article to Japanese, to let Japanese web devs know better this?

    1. Dimitri Glazkov · February 2, 2012

      Sure thing. Go for it.

  44. A Short Simple Video Explaining the Shadow DOM and Web Components « Christian Cantrell linked here · March 22, 2012

    […] What the Heck is Shadow DOM? […]

  45. Adobe Explains Shadow DOM And Web Components | WebProNews linked here · March 22, 2012

    […] to Dmitri Glazkov, Shadow DOM “refers to the ability of the browser to include a subtree of DOM elements into the rendering […]

  46. Explanation of the Shadow DOM and Web Components – Short Video « Daniel Moore linked here · March 22, 2012

    […] What the Heck is Shadow DOM? […]

  47. ygbr · May 6, 2012

    Reblogged this on YGeek!.

  48. Custom Scrollbars in WebKit | UmarHamzaOnline.Com linked here · May 19, 2012

    […] now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put […]

  49. Inspecting the Shadow DOM in Google Chrome Inspector | Oliver Smith linked here · May 19, 2012

    […] the past year or so there has been much hype surrounding the shadow DOM and the new options it allows for styling standard elements such as […]

  50. CSS generated content on replaced elements - RedTeamDesign linked here · June 19, 2012

    […] What the Heck is Shadow DOM?. That’s exactly my first question that came up in my head when I first heard about this. All the above examples I mentioned about are based on this WebKit only ability to control a shadow DOM subtree of an element. […]

  51. Revision 77: Do not Track, IHK-Petition und Web Components | Working Draft linked here · June 27, 2012

    […] eines Polyfills für Web Components (ihr wisst schon, Shadow DOM und so) und ein Adobe-Artikel zur Kombination von Shadow DOM und CSS3 […]

  52. Notes on Web Components + ARIA | The Paciello Group Blog linked here · July 6, 2012

    […] standpoint is that the HTML inserted into a document using web componets is included in the Shadow DOM not the regular HTML DOM. I wanted to check how this affects the use of ARIA roles, states and […]

  53. Custom Scrollbars in WebKit | css3China.com linked here · August 13, 2012

    […] now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the “Shadow DOM“. This has been around for a couple of years. David Hyatt blogged it in early 2009 and put […]

  54. :after i :before - doman.art.pl linked here · August 15, 2012

    […] Wymądrzać się nie będę. Jeżeli interesuje was ten temat, zapraszam tutaj: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  55. Scott Logic » JSConf EU 2012 linked here · October 12, 2012

    […] talk on the shadow DOM was great, it’s a very exciting topic which she devlivered with some steady-handed live […]

  56. HTML5 대한민국 관심그룹 18차회의를 다녀와서… | Wise Blog linked here · October 15, 2012

    […] 표준을 제안해서 개발한 google의 Dimitri Glazkov가 shadow DOM의 이해를 돕기위해 What the Heck is Shadow DOM? 이라는 글을 자신의 블로그에 […]

  57. cssamuelson · October 22, 2012

    I think that Shadow DOM can be used for hiding DOMs from the container page. However, malicious host pages can redefine WebKitShadowRoot object. For instance, page A at Host A has script B from Host B. Script B can use ShadowDOM to hide some DOMs from PageA. However, page A can redefine WebKitShowRoot objects to reveal information. I claim that WebKitShadowRoot must be non-over-writable like window and document objects. However, the current chrome browser does not support this. Please enlighten me if I am incorrect.

    1. Dimitri Glazkov · October 22, 2012

      cssamuelson@, As the spec explains (http://www.w3.org/TR/shadow-dom/#introduction), Shadow DOM is not meant to provide any security assurances. The boundaries it provides are for functional encapsulation. Having said that, there is a bug https://www.w3.org/Bugs/Public/show_bug.cgi?id=16509 filed on spec, which deals with the concept of “isolation”, or turning the functional boundary into a trust boundary.

      1. cssamuelson · October 22, 2012

        Thank you Glazkov for the immediate reply. Though, Shadow DOM is “NOT” meant for security assurance, obviously Shadow DOM can be used for hiding DOMs from the hosting page by making ShadowRoot inaccessible from the hosting page. There is no way for the hosting page to access Shadow DOMs unless going through ShadowRoot. I think that it is correct. Moreover, What goods can come from allowing redefinition of ShadowRoot object for the purpose of functional encapsulation ?

  58. CSS generated content on replaced elements | Создание сайтов во Владивостоке linked here · November 11, 2012

    […] What the Heck is Shadow DOM?. That’s exactly my first question that came up in my head when I first heard about this. All the above examples I mentioned about are based on this WebKit only ability to control a shadow DOM subtree of an element. […]

  59. Revision 96: News, HTML5 und Links | Working Draft linked here · November 14, 2012

    […] zumindest laut Peters Padawanen ein echtes Problem darstellt. Hans setzt Hoffnung in gestaltbares Shadow DOM bzw. das Web Component Model. Rodney meint, die sollen sich mal nicht so anstellen: Web-Zeug sieht […]

  60. Talks To Help You Become A Better Front-End Engineer In 2013 | DigitalMofo linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  61. Talks To Help You Become A Better Front-End Engineer In 2013 | MyOfflineTheme.com Skyrocket Your Offline Business Just Now linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  62. Talks To Help You Become A Better Front-End Engineer In 2013 | Creative Online Journal by Emrah Akman linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  63. Talks To Help You Become A Better Front-End Engineer In 2013 linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  64. Today’s Links | JohnAspinall.co.uk linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  65. Talks To Help You Become A Better Front-End Engineer In 2013 - Steve deGuzman linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  66. Talks To Help You Become A Better Front-End Engineer In 2013 « Books linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  67. Talks To Help You Become A Better Front-End Engineer In 2013 | Diancin Designs linked here · December 22, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  68. Talks To Help You Become A Better Front-End Engineer In 2013 - Цялостни IT решения,bussines 2 bussines,Оферти,Обяви,Работа, Коли под наем,Rent A Car ,Уеб Дизайн,nternet access, hosting, web design, netwo linked here · December 23, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  69. UX News & Links December 24, 2012 | Erie Design Partners linked here · December 24, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  70. Talks To Help You Become A Better Front-End Engineer In 2013 | Dank Logic linked here · December 26, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  71. Talks To Help You Become A Better Front-End Engineer In 2013 | EasyWeb linked here · December 26, 2012

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  72. Web Components On Google Developers Live Israel | Ido Green linked here · January 2, 2013

    […] What the Heck is Shadow DOM? […]

  73. Talks To Help You Become A Better FrontEnd Engineer In 2013 - rehavaPress linked here · January 6, 2013

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  74. Meet Shadow DOM – a New Kid in Town | samuli.hakoniemi.net linked here · January 22, 2013

    […] What the Heck is Shadow DOM? […]

  75. Google Developers Live On Web Components (Part 2) | Ido Green linked here · January 23, 2013

    […] A great post on Shadow Dom from Dimitri Glazkov […]

  76. Talks To Help You Become A Better Front-End Engineer In 2013 » 7D Interactive : Innovative Web Development & SEO in Maryland linked here · February 19, 2013

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  77. apply webkit scrollbar style to just textarea | BlogoSfera linked here · March 6, 2013

    […] there any way to use these shadow dom elements to apply css only to a specific element. I’m thinking that I want the webkit customer […]

  78. Change an input’s HTML5 placeholder color with CSS | Everyday I'm coding linked here · March 12, 2013

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  79. Revision 121: requestAutocomplete, Web Components, Offline-Detection | Working Draft linked here · May 22, 2013

    […] für Web Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und Shadow DOM und den diversen Einzelteilen der jeweiligen […]

  80. Alex Leblois · May 31, 2013

    Hi,

    The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the

    document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

    Which information given by you on DOM, very informative. So thanks for sharing your knowledge. There are few other link

    that’s also helpful for developers.

    http://www.mindstick.com/Articles/d4d10ebd-58c8-45a1-88f4-724497f7a36e/?JavaScript%20Document%20Object%20Model
    http://msdn.microsoft.com/en-us/library/dd282900(v=vs.85).aspx

  81. Talks To Help You Become A Better Front-End Engineer In 2013 | Smashing Magazine linked here · June 28, 2013

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  82. Live blogging at WDCNZ 2013 | Xero Blog linked here · July 24, 2013

    […] You can show the Shadow DOM inside the Chrome dev tools – it’s hidden behind the cog on the bottom right. There’s a great summary of what Shadow DOM actually is here. […]

  83. vertical alignment for FORM INPUT FIELDS in safari and chrome - CSS Solutions - Developers Q & A linked here · July 26, 2013

    […] Unfortunately you can’t style select elements generated by Safari and Chrome. What you’re dealing with has been coined Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  84. Useful links: Shadow DOM, social media & Myers Briggs, | Web TeacherWeb Teacher linked here · July 31, 2013

    […] What the Heck is Shadow DOM? Indeed. […]

  85. Sam · August 5, 2013

    Reblogged this on Sahara Hacker.

  86. Change an input’s color with CSS and HTML5 placeholder linked here · August 5, 2013

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  87. Change an input's HTML5 placeholder color with CSS - oneuptime | oneuptime linked here · August 26, 2013

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  88. Live blogging at WDCNZ 2013 - Accounting linked here · August 29, 2013

    […] You can show the Shadow DOM inside the Chrome dev tools – it’s hidden behind the cog on the bottom right. There’s a great summary of what Shadow DOM actually is here. […]

  89. Christian Z. (@ocmexfood) · September 10, 2013

    Delete my prior comment since it won’t show HTML code. It was just saying that you seem to have an unnecessary DIV in the “gotta wear shades” example. Can’t it just be a P element with an ID of “foo” without needing a DIV around it?

  90. Hiding Native HTML5 Video Controls in Full-Screen Mode | Web Development, Search Engine Optimization, Social Media Marketing Guru linked here · September 26, 2013

    […] reading this superb intro article by Dimitri Glazkov I learned that “there’s a handy pseudo attribute capability, which […]

  91. Beta Sites Galore | Hiding Native HTML5 Video Controls in Full-Screen Mode linked here · September 26, 2013

    […] reading this superb intro article by Dimitri Glazkov I learned that “there’s a handy pseudo attribute capability, which […]

  92. Hiding Native HTML5 Video Controls in Full-Screen Mode - Abstract PHP linked here · September 27, 2013

    […] reading this superb intro article by Dimitri Glazkov I learned that “there’s a handy pseudo attribute capability, which […]

  93. Hiding Native HTML5 Video Controls in Full-Screen Mode | Lunarium Design linked here · September 27, 2013

    […] reading this superb intro article by Dimitri Glazkov I learned that “there’s a handy pseudo attribute capability, which […]

  94. Hiding Native HTML5 Video Controls in Full-Screen Mode | CSS Patterns linked here · September 29, 2013

    […] reading this superb intro article by Dimitri Glazkov I learned that “there’s a handy pseudo attribute capability, which […]

  95. André Jochim · May 1, 2014

    There is a small mistake in the first JavaScript (var slider = document.getElementsById(“foo”);)

    It should say “getElementById” without an “s”

  96. How to: Change an input's HTML5 placeholder color with CSS | SevenNet linked here · November 20, 2014

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  97. How to: Change an input's HTML5 placeholder color with CSS | Technical information for you linked here · December 2, 2014

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  98. Panduan Mendesain Elemen-Elemen Formulir HTML dari Awal | DTE :] linked here · December 5, 2014

    […] What the Heck is Shadow DOM? – Dimitri Glazkov […]

  99. Solution: Change an input's HTML5 placeholder color with CSS #dev #it #computers | Good Answer linked here · December 7, 2014

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  100. Javascript Dom Articles - Khai's personal knowledge vault. linked here · January 15, 2015

    […] http://developer.mozilla.org/en/docs/Determining_the_dimensions_of_elements http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/ […]

  101. Putting the “Aech” in HTML | aechcutt.com linked here · March 13, 2015

    […] Dimitri Glazkov on the Shadow DOM […]

  102. Numeric Inputs – A Comparison of Browser Defaults | Lunarium Design linked here · March 25, 2015

    […] We can also remove the controls from Safari, but differently than Firefox using a method that tackles the Shadow DOM: […]

  103. Numeric Inputs – A Comparison of Browser Defaults - A Geek's View linked here · March 25, 2015

    […] also remove the controls from Safari, but differently than Firefox using a method that tackles the Shadow DOM […]

  104. Numeric Inputs – A Comparison of Browser Defaults | Idun Design linked here · March 25, 2015

    […] We can also remove the controls from Safari, but differently than Firefox using a method that tackles the Shadow DOM: […]

  105. Numeric Inputs – A Comparison of Browser Defaults - Daniele Milana linked here · March 25, 2015

    […] We can also remove the controls from Safari, but differently than Firefox using a method that tackles the Shadow DOM: […]

  106. Numeric Inputs – A Comparison of Browser Defaults - Browser Zone linked here · March 26, 2015

    […] We can also remove the controls from Safari, but differently than Firefox using a method that tackles the Shadow DOM: […]

  107. Karthikeyan · April 12, 2015

    Reblogged this on Ruby on Rails Blog.

  108. railsfreak · April 12, 2015

    Reblogged this on thinkingruby.

  109. The shadow side of HTML linked here · April 17, 2015

    […] What the Heck is Shadow DOM? […]

  110. gravitybrake · May 5, 2015

    Reblogged this on gravitybrake.

  111. Why you can do :hover::after and not ::after:hover › Martin Wolf Front End Web Development linked here · May 19, 2015

    […] This is only working in this order. You can not do ::after:hover because you can’t detect the hover over a pseudo element. That’s probably because it’s not a real element. It does not exist in the DOM. It’s only available in the so called Shadow DOM. […]

  112. What is the shadow DOM? - Todd Gallimore linked here · June 19, 2015

    […] What is the shadow DOM? […]

  113. cyberkrul · June 26, 2015

    Reblogged this on cyberkrul and commented:
    Shadow DOM …

  114. Styling SVG <use> Content with CSS » CSS 3 & HTML 5 Links und Infos linked here · July 16, 2015

    […] What the Heck is Shadow DOM? […]

  115. Styling SVG <use> Content with CSS - InfoLogs linked here · July 16, 2015

    […] What the Heck is Shadow DOM? […]

  116. Styling SVG <use> Content with CSS - Daniele Milana linked here · July 16, 2015

    […] What the Heck is Shadow DOM? […]

  117. I Ching App with Polymer and ES6 | linked here · July 16, 2015

    […] accessible (well almost, there is a loop hole) by the scripts associated with the component, aka Shadow DOM. The styles rules would also only be applied locally. So basically we get fully separate and […]

  118. Trying Out Polymer « maureen.l.davey linked here · July 27, 2015

    […] What the Heck is Shadow Dom? […]

  119. Bond James · July 28, 2015

    Dimitri Glazkov your page here was very informative. But better yet it was HILARIOUS. I like your writing style. I had to try not to laugh. It would have been interesting explaining my cackling to my non-IT nextdoor colleagues. 🙂

  120. Customizing -webkit Scrollbars! | Tony Collings' Technical Blog linked here · August 12, 2015

    […] bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together […]

  121. Shadow DOM | Seemed Worthwhile At the Time linked here · May 6, 2016

    […] explanation here: What the Heck is Shadow DOM? by Dimitri Glazkov, […]

  122. Unconference – Placeholder linked here · May 28, 2016

    […] This was the first time that I attended a conference on software development and I have to say it was truly humbling to listen to these seasoned devs share their stories and experiences. Some talked about brainstorming hacks to facilitate meetings between the business folks and the tech guys. Some shared their work in the tech industry in China, where the sheer scale and pace of development is both impressive and terrifying. Some talked about web components and Javascript transpilers. All I could do most of the time was take lots of notes and nod like I understood what a “shadow DOM” was. […]

  123. Panduan Mendesain Elemen-Elemen Formulir HTML dari Awal linked here · October 29, 2016

    […] What the Heck is Shadow DOM? – Dimitri Glazkov […]

  124. What the Heck is Shadow DOM? – VaughnPaul.com linked here · January 9, 2017

    […] What the Heck is Shadow DOM? | Dimitri Glazkov. […]

  125. Shadow DOM v1: Self-Contained Web Components | Web | Google Developers – VaughnPaul.com linked here · January 9, 2017

    […] All that is well and good. Then what the heck is shadow DOM? […]

  126. html – 使用CSS更改HTML5输入的占位符颜色 - 代码日志 linked here · February 8, 2017

    […] 关于最佳实现的讨论仍在继续。注意，伪元素的行为类似于Shadow DOM中的真实元素。输入上的填充将不会获得与伪元素相同的背景颜色。 […]

  127. How to create (and use) custom components with Angular 2 - Gistia Labs Gistia Labs linked here · April 30, 2017

    […] a more detailed read on Shadow DOM and a nice video that explains […]

  128. Инкапсуляция в коде веб-приложений: что такое shadow DOM | Библиотека программиста linked here · July 5, 2017

    […] статьи Дмитрия Глазкова о тонкостях реализации […]

  129. W3C and WHATWG Provide HTML5 Updates | Adrian Roselli linked here · July 7, 2017

    […] all things related to it, take a few minutes to read this post about a “Shadow Dom:” What the Heck is Shadow DOM? If you play at all with JavaScript (libraries or otherwise), you may be interested to read up on […]

  130. Documenting Components In Markdown With Shadow DOM – Smashing Magazine linked here · July 11, 2017

    […] styles written for components from affecting other parts of the page, we’ll need to use shadow DOM8 to create an encapsulated […]

  131. Documenting Elements In Markdown With Shadow DOM – Smashing Journal - NAM Web Designs in Roaonoke linked here · July 11, 2017

    […] written for parts from affecting different elements of the web page, we’ll want to make use of shadow DOM8 to create an encapsulated […]

  132. Documenting Components In Markdown With Shadow DOM – Smashing Magazine | Webbero linked here · July 11, 2017

    […] prevent styles written for components from affecting other parts of the page, we’ll need to use shadow DOM8 to create an encapsulated […]

  133. Building Pattern Libraries With Shadow DOM In Markdown – Smashing Magazine | Webbero linked here · July 11, 2017

    […] prevent styles written for components from affecting other parts of the page, we’ll need to use shadow DOM10 to create an encapsulated […]

  134. Constructing Sample Libraries With Shadow DOM In Markdown – Smashing Journal - NAM Web Designs in Roaonoke linked here · July 11, 2017

    […] written for parts from affecting different elements of the web page, we’ll want to make use of shadow DOM10 to create an encapsulated […]

  135. Building Pattern Libraries With Shadow DOM In Markdown linked here · July 11, 2017

    […] prevent styles written for components from affecting other parts of the page, we’ll need to use shadow DOM10 to create an encapsulated […]

  136. Change an HTML5 input's placeholder color with CSS - HowSolve linked here · July 12, 2017

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  137. Building Pattern Libraries With Shadow DOM In Markdown - Ans Flow linked here · July 30, 2017

    […] prevent styles written for components from affecting other parts of the page, we’ll need to use shadow DOM10 to create an encapsulated […]

  138. Google: Shadow DOMs Should Work Fine - Scott.Services Online Marketing NewsScott.Services Online Marketing News linked here · August 7, 2017

    […] asking if shadow DOMs are okay with GoogleBot and if Google can index the content. A Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a […]

  139. Google: Shadow DOMs Should Work Fine - globalURLpromoter.comglobalURLpromoter.com linked here · August 7, 2017

    […] asking if shadow DOMs are okay with GoogleBot and if Google can index the content. A Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a […]

  140. Google: Shadow DOMs Should Work Fine - On Page SEO Checker linked here · August 7, 2017

    […] asking if shadow DOMs are okay with GoogleBot and if Google can index the content. A Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a […]

  141. Shadow DOM – XINXIN linked here · September 20, 2017

    […] https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  142. Shadow DOM v1: Self-Contained Web Components – Daniel Moon linked here · October 9, 2017

    […] All that is well and good. Then what the heck is shadow DOM? […]

  143. Test the leading edge of accessibility with aXe Coconut and axe-core 3.0-alpha linked here · December 1, 2017

    […] a nutshell: Shadow DOM, part of the recent HTML standards movement towards Web Components, is a way to encapsulate […]

  144. Building Pattern Libraries With Shadow DOM In Markdown — Smashing Magazine linked here · December 3, 2017

    […] To prevent styles written for components from affecting other parts of the page, we'll need to use shadow DOM to create an encapsulated […]

  145. Building Pattern Libraries With Shadow DOM In Markdown - ThemesAffair linked here · December 12, 2017

    […] styles written for components from affecting other parts of the page, we’ll need to use shadow DOM to create an encapsulated […]

  146. Change an HTML5 input’s placeholder color with CSS – CodiHack linked here · December 18, 2017

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  147. Talks To Help You Become A Better Front-End Engineer In 2013 — Smashing Magazine | Webbero linked here · December 19, 2017

    […] components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM, Mutation Observers, custom elements, MDV, Object.observe(), CSS — how do they all fit […]

  148. Building Pattern Libraries With Shadow DOM In Markdown — Smashing Magazine | Webbero linked here · December 19, 2017

    […] prevent styles written for components from affecting other parts of the page, we’ll need to use shadow DOM to create an encapsulated […]

  149. The latest ways to deal with the cascade, inheritance and specificity - ..:: WEB Aholic ::.. linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  150. The latest ways to deal with the cascade, inheritance and specificity | Sapian Technologies linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  151. The latest ways to deal with the cascade, inheritance and specificity | Tech News linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  152. The latest ways to deal with the cascade, inheritance and specificity - Scripts Mix linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  153. The latest ways to deal with the cascade, inheritance and specificity | StrikeWorks Media linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  154. The latest ways to deal with the cascade, inheritance and specificity – 1OO Club linked here · January 10, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  155. The latest ways to deal with the cascade, inheritance and specificity | OnlineDefinition linked here · January 12, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  156. How to change an HTML 5 input's placeholder color with CSS | How To fix problems linked here · February 4, 2018

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  157. The latest ways to deal with the cascade, inheritance and specificity – JCB Web Design linked here · February 12, 2018

    […] using shadow DOM, rather than following a verbose naming convention, we’ll be able to omit classes altogether. […]

  158. Chromium分发输入事件给WebKit处理的过程分析 – AresProgramming linked here · June 2, 2018

    […] TouchEventDispatchMediator类的成员函数dispatchEvent首先调用成员函数event获得一个TouchEvent对象。这个TouchEvent描述的就是当前发生的Touch Event。调用这个TouchEvent对象的成员函数eventPath可以获得一个EventPath对象。这个EventPath对象描述的是当前发生的Touch Event的分发路径。关于WebKit中的Event分发路径，下面我们再描述。有了这个EventPath对象之后，TouchEventDispatchMediator类的成员函数dispatchEvent调用它的成员函数adjustForTouchEvent调整Touch Event分发路径中的Shadow DOM的Touch List。关于Shadow DOM的更详细描述，可以参考What the Heck is Shadow DOM这篇文章。 […]

  159. The shadow side of HTML | Software & Web development linked here · June 26, 2018

    […] What the Heck is Shadow DOM? […]

  160. Angular面试题汇总 – 独の狼 linked here · July 4, 2018

    […] https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  161. The Accessibility Tree linked here · August 8, 2018

    […] The example used is unusual as the video element has a complex UI which includes controls in the accessibility tree that are in the Shadow DOM. […]

  162. Change an HTML5 input's placeholder color with CSS - HTML LEARNING linked here · December 24, 2018

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  163. bigerck · December 25, 2018

    We have traveled long .. from simple SVG to polymer, react and angular 😉

  164. Change an HTML5 input's placeholder color with CSS - CSS TUTORIAL linked here · December 29, 2018

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  165. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements – ▲ Design News linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  166. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements – Instant Web Site Tools linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  167. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - Web Design Tips linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  168. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - Mashup Design : Web Design Articles & Resources linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  169. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements – Saginet Viral Site linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  170. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements – Dinezh.com linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  171. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - Pixallus linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use […]

  172. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - Make Money Updater linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  173. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - ONCALL Solutions linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  174. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - News 20h linked here · March 15, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  175. What Is The Web Components And How To Understand Them? | Coding Videos linked here · March 15, 2019

    […] have noticed that we had to write some amount of code to register the component and activate the Shadow DOM. This code will be repeated in each component created, so it makes sense to bring it to the base […]

  176. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements - Browser Zone linked here · March 16, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use […]

  177. Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements – Charlies Garage linked here · March 16, 2019

    […] the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases […]

  178. Cover Flow Remade with CSS and jQuery linked here · March 20, 2019

    […] sliders combined with various WebKit-specific CSS properties and shadow DOM pseudo-elements let us create a custom “scrollbar” much like the […]

  179. How do we achieve automation? – atasteof linked here · April 15, 2019

    […] full test automation has encountered a small inconvenient, Polymer Apps use what is known as Shadow DOM, but we’ll see about that in the near […]

  180. Salesforce Lightning Web Components Advantage | ForceBlogs linked here · May 22, 2019

    […] More Secure As Web Components have concept of Shadow DOM, it makes them more secure. You can find some good tutorials about the shadow DOM here. […]

  181. javascript – Retrieve website DOM via http request in GO-ThrowExceptions – ThrowExceptions linked here · March 4, 2020

    […] A simple HTTP request (via Go or anything else) will only ever get the raw HTML. The DOM is a browser-generated interpretation of the raw HTML. Yes, there is even something like the Shadow DOM. […]

  182. javascript – Pass props to parent component in React.js-ThrowExceptions – ThrowExceptions linked here · March 5, 2020

    […] illustrate the issue, I’ll take this quote about the Shadow DOM, that is used inside browsers to render things like sliders, scrollbars, video […]

  183. 11 Most Asked Questions On CSS linked here · May 25, 2020

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element. CSS selectors […]

  184. html - Change an HTML5 input's placeholder color with CSS - Flisks linked here · August 15, 2020

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  185. 将道具传递给React.js中的父组件_javascript问答 linked here · October 4, 2020

    […] 为了说明这个问题，我将引用有关Shadow DOM的引用，该引用在浏览器内部用于呈现滑块，滚动条，视频播放器等内容： […]

  186. [javascript] React.js의 부모 구성 요소에 소품 전달 - 리뷰나라 linked here · November 3, 2020

    […] 스크롤 막대, 비디오 플레이어와 같은 것을 렌더링하는 데 사용되는 Shadow DOM 에 대해이 인용문을 가져옵니다 […]

  187. Polymer 2.0 getElementById in different ShadowDom - TechInPlanet linked here · March 29, 2021

    […] Well first thing that I see is you use document.getElementById("test"); and if you say this worked you have used Shady Dom. Polymer 2 forces you to use Shadow Dom so this command should be replaced by Polymer.dom(this.root).querySelector("#test"). Because Shadow Dom encapsulates your Component you cant access its content with the document Object But this should not fix your Problem. This Encapsulation means you can´t access the Content of a WebComponent so you cannot access an element with id:xyz from another Component. Have a look at these links they will explain to you how shadowDom works: 1. https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 2. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM 3. https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  188. What are the pros and cons of creating custom HTML5 elements/widgets using in Polymer compared to AngularJS – Fix Code Error linked here · April 23, 2021

    […] that makes creating custom elements easy as well. However, Polymer uses native HTML5 APIs like the ShadowDOM, which AngularJS […]

  189. 淺談Angular的12個經典問題 – WalkonNet linked here · May 25, 2021

    […] What the Heck is Shadow DOM? […]

  190. HTML5 için input placeholder rengini CSS ile değiştirme - koddla linked here · August 16, 2021

    […] iyi uygulamanın ne olduğu hakkındaki tartışma hala devam ediyor. Sahte-öğelerin Gölge DOM‘da gerçek öğeler gibi davrandığını […]

  191. React.js의 부모 구성 요소에 소품 전달 { // event.component.props - How IT linked here · September 13, 2021

    […] 스크롤 막대, 비디오 플레이어와 같은 것을 렌더링하는 데 사용되는 Shadow DOM 에 대해이 인용문을 가져옵니다 […]

  192. Change a HTML5 input's placeholder color with CSS - PhotoLens linked here · February 10, 2022

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  193. Change a HTML5 input's placeholder color with CSS - ErrorsFixing linked here · March 30, 2022

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  194. [SOLVED] Change a HTML5 input's placeholder color with CSS – BugsFixing linked here · April 1, 2022

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  195. The Shadow DOM isn’t a Marvel thing? - Stuart Thomas linked here · May 4, 2022

    […] I was demo’ing this piece of work to a team recently, and when I explained that I had to write an extension method for IWebDriver to interact with elements in the Shadow DOM, the product owner on the team thought I was talking about “something from Marvel”, so just for you Claire here’s a link to a blog article that explains the Shadow DOM far better than I did – What the heck is the Shadow DOM? […]

  196. Pass props to parent component in React.js – w3toppers.com linked here · May 10, 2022

    […] illustrate the issue, I’ll take this quote about the Shadow DOM, that is used inside browsers to render things like sliders, scrollbars, video […]

  197. Pass props to parent component in React.js linked here · May 23, 2022

    […] illustrate the issue, I’ll take this quote about the Shadow DOM, that is used inside browsers to render things like sliders, scrollbars, video […]

  198. Change a HTML5 input’s placeholder color with CSS – Code D3 linked here · August 20, 2022

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  199. Why Shadow DOM when we have iframes? – Code D3 linked here · August 20, 2022

    […] What The Heck is Shadow DOM/ […]

  200. Vision-oriented and impact-oriented mindsets – Dimitri Glazkov linked here · August 25, 2022

    […] adherence to the vision: “the culture weirdo” or “the robots wonk”. I used to be “the Shadow DOM guy” and even drove a car with a personalized “SHDWDOM” license plate for some […]

  201. Pass props to parent component in React.js – Row Coding linked here · September 14, 2022

    […] illustrate the issue, I’ll take this quote about the Shadow DOM, that is used inside browsers to render things like sliders, scrollbars, video […]

  202. Was ist ein ShadowDOM? | Komentor • Wons linked here · September 15, 2022

    […] diese Implementierungen sehen und dennoch werden sie angezeigt. Wie? Da bin ich drauf gestoßen diesem Blog von Dimitri Glazkov Dies erklärt wunderbar das Konzept der Shadow-DOM-Kapselung, die von Browsern verwendet wird, um […]

  203. Что такое ShadowDOM? | Кодементор • ARUF linked here · September 23, 2022

    […] не менее они показаны. Как? Именно тогда я наткнулся на этот блог Дмитрия Глазкова который прекрасно объясняет концепцию инкапсуляции […]

  204. Что такое ShadowDOM? | Кодементор • Wonz linked here · September 28, 2022

    […] не менее они показаны. Как? Именно тогда я наткнулся на этот блог Дмитрия Глазкова который прекрасно объясняет концепцию инкапсуляции […]

  205. Solved: Change a HTML5 input's placeholder color with CSS - Daily Developer Blog linked here · October 3, 2022

    […] the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the […]

  206. How Is Salesforce Testing Carried Out With Different Automated Testing Tools? - Topic Solutions linked here · November 29, 2022

    […] new technology called “shadow DOMs” is currently being implemented in some browsers. This technology can cause issues with your […]

  207. Is Shadow DOM Fast Like Virtual DOM In React.js? - Programming Questions And Solutions Blog linked here · February 23, 2023

    […] http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ […]

  208. Explore SHDW: Uncover the Mystery in Tech linked here · September 23, 2024

    […] It’s also vital to focus on optimizing shadow DOMs in SHDW SEO. Shadow DOM lets browsers show a subset of DOM elements. This does not mess up the main document’s DOM tree17. […]

  209. How to Build a Pentest Robot With Selenium IDE - HackWatchit linked here · March 11, 2025

    […] [2] https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/#:~:text=Shadow%20DOM%20refers%20to%20the&#8230;. […]

  210. Notes on Web Components + ARIA - Vispero linked here · March 10, 2026

    […] standpoint is that the HTML inserted into a document using web components is included in the Shadow DOM not the regular HTML DOM. I wanted to check how this affects the use of ARIA roles, states and […]

  211. The Browser Accessibility Tree - TPGi linked here · March 10, 2026

    […] The example used is unusual as the video element has a complex UI which includes controls in the accessibility tree that are in the Shadow DOM. […]