polymer的伪元素操作（::语法）-优快云博客

本文介绍了在Shadow DOM中如何正确地为分布的内容应用样式。重点讲解了使用::content伪元素的限制，以及如何通过包裹元素来解决选择器的问题，并提到了自定义属性在分布内容中的局限性。

2019独角兽企业重金招聘Python工程师标准>>>

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.

<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: