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

Question

这对谷歌来说是不可能的，因为每篇文章都在谈论: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 的内容。伪元素是:

Selects distributed nodes inside of an element. Needs to be paired with polyfill-next-selector for browsers that do not support the native selector.

::content h1 {
    color: red;
}

来源: http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

这很有帮助，但我仍然觉得整个事情相当不透明。任何额外的见解？

Answer 1

::content伪元素将在 future 的 Web 组件/Shadow DOM 实现中被替换为 ::slotted伪元素。同样，此伪元素所针对的元素已从 <content 更改为至 <slot > 最新版Shadow DOM specification .您可以查看有关该更改的相关讨论 here .
目前浏览器仍支持 <content>和 ::content .

原答案:

摘要:::content本质上是一种深入挖掘 ShadowHost 的后代风格的方法。 ，通常无法设置样式，因为您的 CSS 不知道在没有 ::content 的情况下查找 ShadowDOM 片段。 .

这个答案假设您至少有点熟悉 <template> 元素和 Web Components ，特别是 ShadowDOM ，处理 ShadowTree s 及其两个主要元素，ShadowHost和 ShadowRoot .
备注 - 在撰写本文时，五个主要浏览器中对 Web 组件的支持不到 50%(甚至是带前缀的、默认关闭的支持)。虽然所有现代浏览器都支持 <template> ，只有最新版本的 Chrome 和 Opera 才完全支持 ShadowDOM；在 about:config 中切换必要的功能后，Firefox 支持它的一部分( dom.webcomponents.enabled ) 到 真 .
使用ShadowDOM的目标类似于MVC的 separation of concerns .也就是说，我们希望将我们的内容与我们的演示文稿分开，并允许在我们的代码中封装模板以帮助使其更易于管理。我们已经在各种编程语言中实现了这一点，但一段时间以来，它在 HTML 和 CSS 中仍然是一个问题。此外，在 Web 应用程序中设置元素样式时，可能会与类名发生冲突。
通常，我们与 LightDOM 互动(一种“光明领域”)，但有时利用封装会有所帮助。穿越到这种“影子领域”(Web Components 的一部分)是一种防止上述问题的新方法 允许封装 .应用于您 ShadowTree 中的标记的任何样式不适用于您的 ShadowTree 之外的标记，即使使用了完全相同的类或选择器。
当ShadowTree (位于 ShadowDOM 中)有一棵树来自 LightDOM分布在其中，和/或当 ShadowTree被渲染，结果被浏览器转换成所谓的 composed tree .
当浏览器呈现您的代码时，内容将被分发并插入到物理键入位置以外的新位置。这个分布式输出就是你看到的(以及浏览器看到的)，被称为 composed tree .实际上，内容最初并不是按照现在出现的顺序输入的，但您不会知道这一点，浏览器也不会。如果您愿意，这种“最终结果”和“原始代码”之间的分离是封装的主要好处之一。
Web Components & the Future of CSS 是关于 Web 组件，特别是 ShadowDOM 的 40 分钟精彩视频，由 ZachSaucier 向我指出.

针对您的问题，::content伪元素适用于所谓的 分布式节点 .分布式节点是您在 <content></content> 中放置的任何内容的另一个术语。标签。内容从其在原始标记中的位置分发到您放置 <content> 的任何位置。模板中的标签。
因此，当您需要 CSS 中的特殊性时，通常可以处理选择器的一种方法是转到父元素并将其添加为选择器的一部分。例如:如果 .container {}不够具体，您可以使用 div .container {}或 .main .container {}为了使您的选择器工作。
考虑到 ShadowDOM 的重点，即作用域和封装，您必须意识到您创建的这个新 ShadowTree 是一个全新的(离散的)DOM 片段。它与您的其他内容不在同一个“光域”中；它在一个“影界”。那么，CSS 怎么知道要针对这个“影子领域”呢？通过使用 ::content伪元素!
The ::content pseudo-element selector acts as the parent element of distributed nodes.
HTML5Rocks 有一系列很棒的教程 here , here , 和 here其中涵盖了更多信息并给出了一些很好的示例(请务必使用 Chrome 或 Opera 访问，直到更多浏览器支持这些功能)。
例如，请参阅 HTML5Rocks 代码的修改和改进(由 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>

也可在 上找到JSFiddle (记得在 Chrome 或 Opera 等基于 WebKit 的浏览器中访问)
在这里你可以看到 ::content section p伪元素首先选择 ShadowRoot的内容，这是 div 的内容标记中的元素，然后通过添加 section p 进一步指定.
与普通的 CSS 选择器用法相比，这似乎是不必要的(例如，为什么不直接使用 section p {} ？)，直到您回想起来，在遍历 ShadowTree 时，您通常无法选择 host 的后代元素(哪些分布式节点)，因为它们在我之前提到的“阴影领域”中。