什么是 ::content/::slotted 伪元素，它是如何工作的

The ::content pseudo-element is being replaced in future implementations of Web Components / Shadow DOM with the ::slotted pseudo-element. Likewise, the element targeted by this pseudo-element has changed from <content to <slot> in the latest version of the Shadow DOM specification. You can see related discussion about that change here.

目前浏览器仍支持 <content> 和 ::content.

Currently browsers still support <content> and ::content.

总结:

::content 本质上是一种深入挖掘 ShadowHost 后代并设置样式的方法，这些后代通常无法设置样式，因为您的 CSS 没有知道寻找没有 ::content 的 ShadowDOM 片段.

::content is essentially a way to dig deeper and style descendants of the ShadowHost, which normally aren't available to be styled, because your CSS doesn't know to look for the ShadowDOM fragment without ::content.

此答案假定您至少对 <template> 元素和 Web 组件，特别是 ShadowDOM，它处理 ShadowTree 及其两个主要元素 ShadowHost 和 ShadowRoot.

This answer assumes you are at least somewhat familiar with the <template> element and Web Components, specifically the ShadowDOM, which deals with ShadowTrees and their two main elements, ShadowHost and ShadowRoot.

注意 - 在撰写本文时，五种主要浏览器对 Web 组件的支持不到 50%(即使是带前缀的、默认关闭的支持).虽然所有现代浏览器都支持 <template>，但只有最新版本的 Chrome 和 Opera 完全支持 ShadowDOM；将 about:config (dom.webcomponents.enabled) 中的必要功能切换为 true 后，Firefox 支持其中的部分功能.

Note - As of this writing, there is less than 50% support (even prefixed, off-by-default support) for Web Components across the five major browsers. While all modern browsers support <template>, only recent versions of Chrome and Opera support the ShadowDOM fully; with Firefox supporting parts of it after you toggle the requisite feature in about:config (dom.webcomponents.enabled) to true.

使用 ShadowDOM 的目的类似于 MVC 的 分离担忧.也就是说，我们希望将内容与表示分离，并允许在我们的代码中封装模板以帮助使其更易于管理.我们已经在各种编程语言中实现了这一点，但在 HTML 和 CSS 中它仍然是一个问题一段时间.此外，在 Web 应用中设置元素样式时，可能会与类名发生冲突.

The goal of using the ShadowDOM is similar to MVC's separation of concerns. That is, we want to separate our content from our presentation and allow for encapsulated templates in our code to help make it more manageable. We have this already in various programming languages, but it's remained a problem for some time in HTML and CSS. Further, there can be conflicts with class names when styling elements in web apps.

通常，我们与 LightDOM(一种Light Realm")进行交互，但有时利用封装会有所帮助.闯入这种影界"(Web Components 的一部分)是一种通过允许封装来防止上述问题的新方法.应用于 ShadowTree 中标记的任何样式都不会应用于 ShadowTree 之外的标记，即使使用完全相同的类或选择器也是如此.

Normally, we interact with the LightDOM (a sort of "Light Realm"), but sometimes it would be helpful to take advantage of encapsulation. Crossing into this sort of "Shadow Realm" (part of Web Components) is a new method to prevent the problems mentioned above by allowing encapsulation. Any styles applied to markup in your ShadowTree won't apply to markup outside of your ShadowTree, even if the exact same classes or selectors are used.

当 ShadowTree(位于 ShadowDOM 中)有来自 LightDOM 的树分布在其中，和/或当 ShadowTree 被渲染，结果被浏览器转换成所谓的 合成树.

When the ShadowTree (which lives in the ShadowDOM) has a tree from the LightDOM distributed within it, and/or when the ShadowTree is rendered, the result is converted by the browser into what is called a composed tree.

当浏览器呈现您的代码时，内容将被分发并插入到新的位置而不是实际输入的位置.这个分布式输出就是你看到的(和浏览器看到的)，被称为composed tree.实际上，内容最初并不是按照现在出现的顺序输入的，但是您不会知道这一点，浏览器也不会.最终结果"和最终结果"之间的这种分离.如果您愿意，原始代码"是封装的主要好处之一.

When the browser renders your code, content is being distributed and inserted at new locations other than where it was physically typed. This distributed output is what you see (and what the browser sees), and is called the composed tree. In reality, the content is not originally typed in the order that it now appears, but you won't know this, and neither will the browser. This separation between "end result" and "original code", if you will, is one of the main benefits of encapsulation.

Web 组件 & 是一个 40 分钟的关于 Web 组件，特别是 ShadowDOM 的精彩视频-saucier">ZachSaucier.

针对您的问题，::content 伪元素适用于所谓的分布式节点.分布式节点是您在 <content></content> 标记中放置的任何内容的另一个术语.内容从原始标记中的位置分发到您在模板中放置 <content> 标记的任何位置.

Specific to your question, the ::content pseudo element applies to what are called distributed nodes. A distributed node is another term for whatever you put within the <content></content> tags. The content is distributed from its place in the original markup to wherever you have placed your <content> tags in the template.

因此，当您需要 CSS 中的特定性时，通常可以处理选择器的一种方法是转到父元素并将其添加为选择器的一部分.例如:如果 .container {} 不够具体，您可以按顺序使用 div .container {} 或 .main .container {}使您的选择器工作.

So, when you need specificity in CSS, one way you can handle selectors normally is that you go to the parent element and add that in as part of the selector. Ex: if .container {} is not specific enough, you might use div .container {} or .main .container {} in order to make your selector work.

考虑到ShadowDOM 的要点，即作用域和封装，您必须意识到您创建的这个新ShadowTree 是一个全新的(离散的)DOM 片段.不在同一个光界"作为您的其余内容；它在影界"中.那么，CSS 是如何知道以这个影子领域"为目标的呢?通过使用 ::content 伪元素！

Thinking about the point of the ShadowDOM, which is scoping and encapsulation, you have to realize that this new ShadowTree you've created is a completely new (discrete) DOM fragment. It's not in the same "Light Realm" as the rest of your content; it's in a "Shadow Realm". So, how does the CSS know to target this "Shadow Realm"? By using the ::content pseudo-element!

HTML5Rocks 有很多教程这里, 这里和 here 其中包含更多信息并提供了一些很好的示例(请务必使用 Chrome 或 Opera 访问，直到更多浏览器支持这些功能).p>

例如，查看 HTML5Rocks 中代码的修改和改进(由 Leo 编写)版本:

HTML5Rocks has a great sequence of tutorials here, here, and here which cover more information and give some great examples (be sure to visit with Chrome or Opera until more browsers support these features).