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

Question

这对谷歌来说是不可能的,因为每篇关于:before和:after伪元素的文章似乎都使用了"内容"这个词.

我在这篇 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/

这很有帮助,但我仍然发现整个事件相当不透明.还有其他见解吗？

Answer 1

::content伪元素在使用伪元素的Web Components/Shadow DOM的未来实现中被替换::slotted.同样,此伪元素所针对的元素已在最新版本的Shadow DOM规范中从> 更改<content为<slot> .您可以在此处查看有关此更改的相关讨论.

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

原始答案:

摘要:

::content本质上是一种挖掘更深层次和风格后代的方法ShadowHost,通常无法进行样式化,因为你的CSS不知道没有查找ShadowDOM片段::content.

这个答案假设你至少在某种程度上熟悉<template>元素和Web组件,特别是ShadowDOM,它处理ShadowTrees及其两个主要元素,ShadowHost以及ShadowRoot.

注 - 在撰写本文时,对于五个主要浏览器中的Web组件,支持率(甚至是默认的,默认的默认支持)不到50%.虽然所有现代浏览器都支持<template>,但只有最新版本的Chrome和Opera完全支持ShadowDOM; 在将about:config(dom.webcomponents.enabled)中的必需功能切换为true后,Firefox支持部分功能.

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

通常,我们与LightDOM(一种"光域")进行交互,但有时利用封装会很有帮助.跨越这种"影子领域"(Web组件的一部分)是一种通过允许封装来防止上述问题的新方法.即使使用完全相同的类或选择器,任何应用于标记的样式ShadowTree都不适用于您之外的标记ShadowTree.

当ShadowTree(生活在其中ShadowDOM)具有来自其中的LightDOM分布的树时,和/或当ShadowTree呈现时,结果由浏览器转换为所谓的组合树.

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

Web组件和CSS的未来是在Web组件一个伟大的40分钟的视频并专门ShadowDOM,通过向我指出 ZachSaucier.

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

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

考虑到ShadowDOM的范围,即范围和封装,你必须意识到你创建的这个新的ShadowTree是一个全新的(离散的)DOM片段.它与其他内容不在同一个"光明领域"; 它在"影子领域".那么,CSS如何知道瞄准这个"影子领域"？通过使用::content伪元素!

所述::content伪元素选择器充当分布式节点的父元素.

的HTML5Rocks有教程的一个伟大的序列在这里,在这里,并在这里覆盖的更多信息,并给出一些很好的例子(请务必使用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上找到(记得访问基于WebKit的浏览器,如Chrome或Opera)

在这里,您可以看到伪元素首先选择标记内容的内容,然后通过添加进一步指定.::contentsection pShadowRootdivsection p

与正常的CSS选择器使用相比,这似乎是不必要的(例如,为什么不使用section p {}？),直到你回想起,当ShadowTree你遍历a时,你通常不能选择host元素的后代(分布式节点是),因为它们在我之前提到的"影境".

Answer 2

太糟糕了!不幸的::content是v0,并且已被弃用.

您现在应该使用v1 ::slotted.

此外,<content>被弃用赞成<slot>.

请参阅:http://hayato.io/2016/shadowdomv1/

另请参阅:Web组件 - <content>替换为<slot>的原因