The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements. All you see in the DOM is the element, but it contains a series of buttons and other controls inside its shadow DOM. Think for example of a element, with the default browser controls exposed.
Note that the shadow DOM is not a new thing by any means - browsers have used it for a long time to encapsulate the inner structure of an element.
#Z shadow app code
The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation. You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes - for example appending children or setting attributes, styling individual nodes using, or adding style to the entire shadow DOM tree inside a element.
Simple DOM example Here we will add a link to the Mozilla homepage