Shadow DOM

http://w3c.github.io/webcomponents/spec/shadow/

Shadow DOM is an adjunct tree of DOM nodes. These shadow DOM subtrees can be associated with an element, but do not appear as child nodes of the element. Instead the subtrees form their own scope. For example, a shadow DOM subtree can contain IDs and styles that overlap with IDs and styles in the document, but because the shadow DOM subtree (unlike the child node list) is separate from the document, the IDs and styles in the shadow DOM subtree do not clash with those in the document.

Shadow DOM can be applied to an element by calling the createShadowRoot method. This returns a ShadowRoot node which can then be populated with DOM nodes.

An element with shadow DOM is called a shadow host. When an element has shadow DOM, the element's children are not rendered; the content of the shadow DOM is rendered instead.

##Insertion Points

A shadow DOM subtree can use a element to specify an insertion point in the rendered output. The host's children are displayed at the insertion point. The element acts as an insertion point for rendering only—it does not change where the elements appear in DOM.

You can have more than one insertion point in the shadow DOM subtree! The select attribute lets you choose which children appear at which insertion point.

Insertion points let you reordered or selectively omit rendering the host's children, but they will not cause something to be rendered multiple times. Tree order dictates when each of these elements takes a pass at selecting the children. Once the child is selected to be rendered at one insertion point, it can't be claimed by another one.

Reprojection

Elements in a shadow DOM subtree may have shadow roots of their own. When this happens, the insertion points of the nested shadow DOM subtree act on the nodes in the outer shadow DOM subtree's insertion points.

Multiple Shadow Subtrees

There is another kind of insertion point for this purpose: the element, which pulls in the previously applied shadow DOM subtree (also known as the older tree). For example, here is a template for a custom element which extends the element and adds a direction indicator to it:

CSS and Shadow DOM

Shadow DOM gives authors a lot of control over how content in shadow DOM interacts with styles.

A shadow root has two properties to control this behavior. The first, applyAuthorStyles, will apply the author stylesheet. Setting this property is appropriate when writing shadow DOM that should match the appearance of the surrounding content as closely as possible. There is one caveat: CSS selectors are matched against the shadow DOM subtree, not the flattened tree. Pay attention to child, descendant, sibling and "nth-of-x" selectors when using this property.

The second shadow root property which controls the effect of surrounding styles on content in a shadow DOM subtree is resetStyleInheritance. If this property is set to true all properties are reset to initial values at the shadow boundary.