X

Geertjan's Blog

  • May 27, 2015

Into the Shadow DOM

Geertjan Wielenga
Product Manager

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:

Join the discussion

Comments ( 6 )
  • Drabo Constantin Wednesday, May 27, 2015

    Interesting article. There is also interesting perspective with shadow DOM with Polymer.


  • alex Thursday, May 28, 2015

    Is the ability to include the shadow DOM optional? I'm thinking that if you test each of your components in isolation, including the shadow DOM always may lead to an unnecessary verbose tree. It's definitely useful to see the whole tree, but sometimes you just know your components work and you want to ficus on the rest of the document.


  • Geertjan Thursday, May 28, 2015

    In that case, you can collapse the tree to whatever level you'd like to work with, like any other tree. By default, shadow DOM elements are collapsed within the main node that contains them. Only if you explicitly want to inspect the shadow DOM elements would you expand those elements.


  • alex Thursday, May 28, 2015

    In that case, when is Netbeans 8.1 due? Because I think I'll actually need this feature soon. (I'm a little weary of using a pre-release version @work.)


  • alex Thursday, May 28, 2015

    One more thing. The Netbeans HTML5 web development support page says Netbeans uses an "embedded WebKit browser". But, IIRC, Apple started purging web components support (i.e. shadow DOM, among others) from WebKit after Google left for Blink. Is Netbeans using an older WebKit version or is that page simply out of date?


  • Geertjan Thursday, May 28, 2015

    Take a moment and look at the screenshots above. There you see a browser rendering the HTML5 slider element. That's the JavaFX Web View that makes use of WebKit. And for the roadmap of NetBeans, go here:

    https://netbeans.org/community/releases/roadmap.html


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.