所述
::content伪元素被替换与所述Web组件/阴影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（一种“LightRealm”）互动，但有时利用封装会有所帮助。跨入此类“影子领域”（Web组件的一部分）是一种通过
允许封装
来防止上述问题的新方法。即使
ShadowTree您
ShadowTree使用完全相同的类或选择器，应用于您内部标记的任何样式也不会应用于您外部的标记。
当
ShadowTree（驻留在中
ShadowDOM）具有来自其
LightDOM内部分布的树时，和/或
ShadowTree呈现时，浏览器将结果转换为所谓的组合树 。
当浏览器呈现您的代码时，内容将被分发并插入到新位置， 而不是 实际键入的位置。分布式输出就是您所看到的（以及浏览器所看到的），称为
composedtree。实际上，最初并不是按现在出现的顺序键入内容，但是您不会知道，浏览器也不会。如果需要的话，“最终结果”和“原始代码”之间的分隔是封装的主要好处之一。
Web组件和CSS的未来是在Web组件一个伟大的40分钟的视频并专门ShadowDOM，通过向我指出。
针对您的问题，
::content伪元素适用于所谓的 分布式节点
。分布式节点是您在
<content></content>标签内放置任何内容的另一个术语。内容将从其在原始标记中的位置 分发
到您
<content>在模板中放置标签的任何位置。
因此，当您需要CSS的特殊性时，通常可以处理选择器的一种方法是转到父元素并将其添加为选择器的一部分。例如：如果
.container{}不够具体，则可以使用div .container {}或.main .container {}以使选择器起作用。考虑到ShadowDOM的作用域（即范围和封装），您必须意识到，您创建的这个新ShadowTree是一个全新的（离散的）DOM片段。它与其余内容不在同一个“LightRealm”中；它在“影子领域”中。那么，CSS如何知道以“影子领域”为目标？通过使用
::content伪元素！**[所述
::content伪元素选择器充当分布式节点的父元素。](http://drafts.csswg.org/css-
scoping/#content-combinator)**
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）中访问）
在这里，您可以看到伪元素 首先 选择的内容（即标记中元素的内容）， 然后 通过添加进一步指定。 ::content
section p
ShadowRoot``div
section p
与普通的CSS选择器用法相比，这似乎是不必要的（例如，为什么不使用
section p{}？），直到您回想起遍历a时ShadowTree，您通常无法选择
host元素的后代（分布式节点是），因为它们位于我之前提到过“影子领域”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）