By Geertjan-Oracle on May 27, 2015
Shadow DOM is the subtree of DOM elements that the browser can include into the rendering of a document, without it being rendered into the main document DOM tree.
A complex HTML element, of which several have been introduced in HTML5, such as the HTML5 slider (input type "range"), is constructed via shadow DOM elements. In the HTML elements below, you can see the slider is used, because input type is set to "range", though you do not see the shadow DOM elements that will be used to construct the slider.
Would be handy if you had a tool to inspect the shadow DOM elements within the HTML5 slider and other main DOM elements that have shadow DOM elements. And NetBeans IDE 8.0.2 provides no help, either. Here's how the HTML5 slider above looks in the Browser DOM window of NetBeans IDE 8.0.2:
However, here it is again, in the upcoming NetBeans IDE 8.1, which, as you can see below in the Browser DOM window, includes support for the shadow DOM (click to enlarge the screenshot below to see the full context). Compared to the screenshot above, I can now inspect the shadow DOM by expanding the subnodes of the main input DOM element, while being able to see its shadow DOM elements:
When a shadow DOM element is selected in the Browser DOM window, as shown above, the embedded browser (and the Chrome browser) automatically selects it so that you know where you are and you can quickly find the elements in the browser, even when they are shadow DOM elements.
Moreover, as you can see below, you can select an element within the shadow DOM and then style that specific element in the CSS Styles window:
In the above scenario, I can press the Up arrow key over the height property, which is highlighted above, and then magically I will see the slider in the browser increase in size, because the related style is automatically changed for me, enabling easy and quick tweaking of the style applied to the shadow DOM element.
Further reading and references: