Css 什么是 ：：content：：slotted 伪元素，它是如何工作的

在Web组件/影子DOM的future 实现中，::content伪元素将被::slotted伪元素取代.同样，该伪元素所针对的元素已从<content更改为<slot>；在最新版本的Shadow DOM specification.你可以看到关于这一变化的相关讨论here.

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

原始答案:

Summary:个

::content基本上是一种深入挖掘ShadowHost的后代并对其进行样式化的方法，ShadowHost的后代通常无法进行样式化，因为如果没有::content，CSS不知道如何查找ShadowDOM片段.

这个答案假设您至少稍微熟悉100元素和101，特别是102，它处理ShadowTree及其两个主要元素ShadowHost和ShadowRoot.

Note-在 compose 本文时，五大浏览器对Web组件的支持不到50%(甚至有前缀，默认情况下也不支持).虽然所有现代浏览器都支持<template>，但只有最新版本的Chrome和Opera完全支持ShadowDOM；在将about:config(dom.webcomponents.enabled)中的必要功能切换到true之后，Firefox支持部分ShadowDOM.

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

通常，我们与LightDOM(一种"光域")交互，但有时利用封装会有所帮助.进入这种"影子领域"(Web组件的一部分)是一种新方法，可以防止allowing encapsulation所提到的问题.应用于ShadowTree中的标记的任何样式都不会应用于ShadowTree之外的标记，即使使用了完全相同的类或 Select 器.

当ShadowTree(位于ShadowDOM中)具有分布在其内部的来自LightDOM的树时，和/或当呈现ShadowTree时，浏览器将结果转换成所谓的100.

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

100是一个关于网络组件的40分钟视频，尤其是ZachSaucier向我指出的ShadowDOM.

具体到您的问题，::content伪元素适用于所谓的distributed nodes.分布式 node 是您放在<content></content>标记内的任何东西的另一个术语.内容从其在原始标记中的位置到您在模板中放置<content>个标记的位置是distributed.

因此，当您需要在CSS中指定时，可以正常处理 Select 器的一种方式是转到父元素并将其作为 Select 器的一部分添加进来.例如:如果.container {}不够具体，您可以使用div .container {}或.main .container {}来使您的 Select 器工作.

考虑到ShadowDOM的要点，即作用域和封装，您必须意识到您创建的这个新的ShadowTree是一个全新的(离散的)DOM片段.它与你的内容的睡觉不在同一个"光界"里，它在"影界"里.那么，CSS是怎么知道要瞄准这个"影子王国"的呢？通过使用::content伪元素！

The ::content pseudo-element selector acts as the parent element of distributed nodes.

HTML5Rocks有一系列很棒的教程here、here和here，涵盖了更多信息，并给出了一些很好的例子(在更多浏览器支持这些功能之前，请务必使用Chrome或Opera进行访问).

例如，请参见HTML5Rock中经过修改和改进(Leo)的代码版本:

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>

也可在100上获得(请记住使用基于WebKit的浏览器(如Chrome或Opera)访问)

在这里您可以看到，100section p伪元素是 Select ShadowRoot的内容的first，这是您的标记中的div元素的内容，并且通过添加100section p进一步指定then.

与正常的CSS Select 器用法(例如，为什么不直接使用section p {}？)相比，这似乎没有必要，直到您回想起，在遍历ShadowTree时，您通常不能 Select host个元素(即分布式 node )的后代，因为它们在我前面提到的"影子领域"中.