Styling distributed children (::content)

Under shady DOM, the <content> tag doesn't appear in the DOM tree. Styles are rewritten to remove the ::content pseudo-element, and any combinator immediately to the left of ::content.

This implies:

• You must have a selector to the left of the ::content pseudo-element.

  :host ::content div

  Becomes:

  x-foo div

  (Where x-foo is the name of the custom element.)

• To limit styles to elements inside the ::content tag, add a wrapper element around the <content>element. This is especially important when using a child combinator (>) to select top-level children.

  In this case, the rule:

  .content-wrapper ::content > .special

  Becomes:

  .content-wrapper > .special

Custom properties can't style distributed children. The Polymer  shim doesn't support styling distributed children.