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
::contentpseudo-element.:host ::content divBecomes:
x-foo div(Where
x-foois 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.<dom-module id="my-element"> <template> <style> .content-wrapper ::content > .special { background: orange; } </style> <div class="content-wrapper"><content></content></div> </template> </dom-module>In this case, the rule:
.content-wrapper ::content > .specialBecomes:
.content-wrapper > .special
Custom properties can't style distributed children. The Polymer custom properties shim doesn't support styling distributed children.
