什么是:: content伪元素，它是如何工作的？ [英] What is the ::content pseudo-element and how does it work?
问题描述
这是不可能的谷歌因为每一篇文章谈论：之前和：之后伪元素使用内容一词。
This is impossible to Google for because every article talking about the :before and :after pseudo-elements seems to use the word 'content'.
我在这中听说过CSS-Tricks文章，解释如何实现图像滑块作为Web组件的示例用例。其中出现的代码示例为：
I heard about it in this CSS-Tricks article, explaining how to implement an image slider as an example use-case for web components. The code example it appears inside is thus:
CSS
#slides ::content img {
width: 25%;
float: left;
}
HTML
<template>
...
<div class="inner">
<content select="img"></content>
</div>
</template>
似乎指的是< content> 标签，用于允许用户包括Web组件，但我想更深入地了解这一点。
It seems to be referring to this <content> tag, which is used to allow the user to include Web Components, but I would love to understand this more deeply.
编辑：
进一步阅读后，一个链接作者的Shadow DOM CSS Cheatsheet，其中包含一个段落，说明 :: content 伪元素是什么：
After reading further, in the aforementioned article, I discovered a link the author's "Shadow DOM CSS Cheatsheet" which includes a passage that explains what the ::content pseudo-element is:
在元素内部选择分布式节点。需要配对
和用于不支持
本机选择器的浏览器的polyfill-next-selector。
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/
这是有帮助的，但我仍然发现整个事情不透明。任何其他见解？
This is helpful, but I still find the whole affair rather opaque. Any additional insights?
推荐答案
:: content 伪元素在Web Components / Shadow DOM的未来实现中被替换为 :: slotted 。同样，此伪元素定位的元素已从最近的 < slot 版本的 Shadow DOM规范。
The ::content pseudo-element is being replaced in future implementations of Web Components / Shadow DOM with the ::slotted. Likewise, the element targeted by this pseudo-element has changed from <content to <slot> in the latest version of the Shadow DOM specification.
目前的浏览器仍然支持< 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> 元素和 网络组件 ，特别是 ShadowDOM < a> ，它处理 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.
注意 - 撰写本文时，支持率低于50％ ，关闭默认支持）的Web组件跨五个主要浏览器。虽然所有现代浏览器都支持< template> ，但只有最新版本的Chrome和Opera完全支持ShadowDOM;在您切换 about：config （ dom.webcomponents.enabled ）中的必备功能后，Firefox支持部分功能 true 。
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组件的一部分）是一种新的方法，通过允许封装来防止上述问题。在 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.
当浏览器呈现您的代码时，内容将被分发并插入到除了之外的其他实体键入的新位置。这个分布式输出是你看到的（和浏览器看到的），并且被称为组合树。在现实中，内容不是按照现在出现的顺序输入的，但是你不会知道这一点，浏览器也不会知道。如果你愿意，最终结果和原始代码之间的分隔是封装的主要好处之一。
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 Components& CSS的未来 是一个伟大的40分钟的Web Components视频，特别是ShadowDOM，通过 ZachSaucier 。
具体到您的问题， ::内容伪元素适用于所谓的分布式节点。分布式节点是在< 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片段。它与其他内容不在同一个Light Realm中;它在一个影子领域。那么，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提供了一系列教程这里，此处和这里，其中涵盖更多信息并提供一些很好的示例（一定要访问Chrome或Opera，直到更多浏览器支持这些功能）。
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).
例如，请参阅此修改和改进的（通过 Leo ）版本的来自HTML5Rocks的代码：
For example, see this modified and improved (by Leo) version of the code from HTML5Rocks:
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）
Also available on JSFiddle (Remember to visit in a WebKit-based browser like Chrome or Opera)
在此可以看到 :: content section p 伪元素首先选择 ShadowRoot 的内容， code> div 元素，然后 通过添加节p 进一步指定。
Here you can see that the ::contentsection p pseudo element is first selecting the content of the ShadowRoot, which is the contents of the div element in your markup, and then specifying further by adding section p.
与正常的CSS选择器使用方式相比，这似乎没有必要（例如，为什么不使用 section p {} ？），直到你记住当遍历 ShadowTree 时，你通常不能选择 host 元素的后代分布式节点），因为它们在我之前提到的影子领域。
This may seem unnecessary when compared to normal CSS selector usage (for example, why not just use section p {}?), until you recall that, when traversing a ShadowTree, you cannot normally select descendants of host elements (which distributed nodes are), because they are in the "Shadow Realm" I mentioned earlier.
这篇关于什么是:: content伪元素，它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
