这对谷歌来说是不可能的，因为每篇关于:before和:after伪元素的文章似乎都使用“内容”这个词。
我在this CSS-Tricks文章中听到了这一点，解释了如何将图像滑块实现为Web组件的示例用例。它出现在里面的代码示例是：
CSS
#slides ::content img {
width: 25%;
float: left;
}
HTML
<template>
...
<div class="inner">
<content select="img"></content>
</div>
</template>
它似乎是指这个<content>标记，用于允许用户包含Web组件，但我想更深入地理解这一点。
修改
在进一步阅读之后，在上述文章中，我发现了一个链接作者的“Shadow DOM CSS Cheatsheet”，其中包含一段解释::content伪元素的内容：
选择元素内的分布式节点。需要配对 使用polyfill-next-selector，用于不支持的浏览器 原生选择器。
::content h1 {
color: red;
}
来源：http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/
这很有帮助，但我仍然发现整个事件相当不透明。还有其他见解吗？
答案 0 :(得分：105)
::content伪元素在将来使用::slotted伪元素的Web Components / Shadow DOM实现中被替换。同样，此伪元素所针对的元素已从<content更改为<slot＆gt;在最新版本的Shadow DOM specification中。您可以查看有关该更改的相关讨论here。
目前浏览器仍支持<content>和::content。
<强>要点：
::content本质上是一种挖掘ShadowHost的更深层次和风格后代的方法，这些后代通常无法进行样式化，因为您的CSS并不知道要查找没有::content的ShadowDOM片段。
此答案假设您至少熟悉 <template> 元素和 Web Components ，特别是 {{3} } ，它处理ShadowTree及其两个主要元素ShadowHost和ShadowRoot。
注意 - 在撰写本文时，五个主要浏览器中的Web组件支持率（甚至是默认的，默认情况下为默认支持）不到50％。虽然所有现代浏览器都支持<template>，但只有最新版本的Chrome和Opera完全支持ShadowDOM;在您将about:config（dom.webcomponents.enabled）中的必备功能切换为 true 后，Firefox支持部分内容。
使用ShadowDOM的目标与MVC ShadowDOM 类似。也就是说，我们希望将我们的内容与演示文稿分开，并允许在我们的代码中使用封装模板来帮助使其更易于管理。我们已经在各种编程语言中使用它，但它在HTML和CSS中已经有一段时间了。此外，在Web应用程序中设置样式元素时，可能会与类名冲突。
通常，我们会与LightDOM（一种＆＃34; Light Realm＆＃34;）互动，但有时利用封装会很有帮助。穿越这种“影子境界”＃34; （Web Components的一部分）是一种通过允许封装来防止上述问题的新方法。在ShadowTree中应用于标记的任何样式都不适用于ShadowTree之外的标记，即使使用完全相同的类或选择器也是如此。
当ShadowTree（住在ShadowDOM）中有LightDOM分布在其中的树，和/或呈现ShadowTree时，结果由浏览器转换为所谓的 separation of concerns 。
当浏览器呈现您的代码时，内容将被分发并插入以外的新位置，而是物理输入的位置。这个分布式输出就是你所看到的（以及浏览器看到的内容），并被称为composed tree。实际上，内容最初并不按照现在显示的顺序输入，但您不会知道这一点，浏览器也不会。这种分离＆＃34;最终结果＆＃34;和＃34;原始代码＆＃34;，如果你愿意，是封装的主要好处之一。
composed tree 是关于网络组件的40分钟精彩视频，特别是ShadowDOM，由Web Components & the Future of CSS向我指出。
特定于您的问题，::content伪元素适用于所谓的分布式节点。分布式节点是您在<content></content>标记中放置的任何内容的另一个术语。内容分发从原始标记中的位置到您在模板中放置<content>标记的位置。
因此，当您需要CSS中的特异性时，通常可以处理选择器的一种方法是转到父元素并将其作为选择器的一部分添加。例如：如果.container {}不够具体，您可以使用div .container {}或.main .container {}来使您的选择器正常工作。
考虑到ShadowDOM的范围，即范围和封装，你必须意识到你创建的这个新的ShadowTree是一个全新的（离散的）DOM片段。它不在同一个＆＃34; Light Realm＆＃34;作为你的其他内容;它位于＆＃34;暗影王国＆＃34;。那么，CSS如何知道如何定位这个＆＃34; Shadow Realm＆＃34;？通过使用::content伪元素！
HTML5Rocks有一系列精彩的教程The ::content pseudo-element selector acts as the parent element of distributed nodes.，here和here，它们涵盖了更多信息并提供了一些很好的示例（请确保访问Chrome或Opera，直到更多浏览器支持这些功能）。
例如，请参阅HTML5Rocks中此代码的修改和改进（通过here）版本：
var div = document.querySelector('div');
var root = div.createShadowRoot();
var template = document.querySelector('template');
root.appendChild(template.content);<template>
<style>
h3 { color: red; }
content[select="h3"]::content > h3 { color: green; }
::content section p { text-decoration: underline; }
</style>
<h3>Shadow DOM</h3>
<content select="h3"></content>
<content select="section"></content>
</template>
<div>
<h3>Light DOM</h3>
<section>
<div>I'm not underlined</div>
<p>I'm underlined in Shadow DOM!</p>
</section>
</div>
也可在 Leo 上找到（请记住访问基于WebKit的浏览器，如Chrome或Opera）
在这里，您可以看到 ::content section p伪元素首先选择ShadowRoot的内容，这是标记中div元素的内容，然后通过添加section p进一步指定。
与普通的CSS选择器使用相比，这似乎是不必要的（例如，为什么不只是使用section p {}？），直到你回想起，当你遍历ShadowTree时，你通常不能选择后代host个元素（分布式节点是），因为它们位于＆＃34; Shadow Realm＆＃34;我之前提到过。
答案 1 :(得分：5)
太糟糕了！很遗憾，::content v0 ，已被弃用。
您现在应该使用 v1 ::slotted。
此外，<content>已被弃用，转而使用<slot>。