Polymer Shadow DOM and Styling

Shadow DOM is a new property of DOM which is used to build components. Shadow DOM provides a way to attach a hidden separate DOM to an element.

See a simple HTML example:

In the above code, the header component includes page title and menu button.

Now see the Shadow DOM usage. It allows users to locate the children in a scoped subtree, which is known as shadow tree.

Shadow root is placed at the top of the shadow tree and the elements attached to the shadow tree is called shadow host. This shadow host contains a property called shadowRoot which specifies the shadow root.

Shadow DOM and Composition

If there is an element in the shadow DOM, you can render the element's children by adding the <slot> element to the shadow tree.

For example, use the following shadow tree for <header-demo>.

Add the children to <my-header> element as:

The header replaces the </slot> element with the above specified children as:

If there is no node allocated to the slot, the fallback content is displayed.

You can provide your own icon for an element as -