什么是::内容/ ::开槽伪元素，它是如何工作的？

问题描述 投票：74回答：2

这是不可能的谷歌，因为每一篇文章谈论:before和:after伪元素似乎用的是“内容”。

我在this CSS-技巧文章听说这件事，解释如何实现图像滑块作为示例用例的Web组件。因此，看来内的代码的例子是：

CSS

#slides ::content img {
   width: 25%;
   float: left;
}

HTML

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>

这似乎是指这个<content>标签，这是用来让用户包括Web组件，但我希望能更深刻地理解这一点。

编辑：

进一步阅读，上述文章中，我发现一个链接作者的“影子DOM CSS的cheatsheet”，其中包括一个通道，解释::content伪元素是什么：

选择的元素的内部分布节点。需要与填充工具，下选择配对对于不支持原生的选择浏览器。

::content h1 {
    color: red;
}

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

这是有益的，但我仍然觉得整件事情相当不透明。任何额外的见解？

css html5 web-component shadow-dom html5-template
2个回答
107
投票

所述::content伪元素被替换与::slotted伪元素Web组件/阴影DOM的未来实现。同样，通过这个伪元素有针对性的元素已经从<content改为<slot>在Shadow DOM specification的最新版本。你可以看到有关的变化here相关讨论。

目前浏览器还支持<content>和::content。

原来的答案：

摘要：

::content基本上是挖ShadowHost，通常不是可以个性化的更深层次和风格的后裔，因为你的CSS不知道去寻找ShadowDOM片段没有::content的方式。

这个答案假定您至少有点熟悉<template>元素和Web Components，特别是ShadowDOM，这与ShadowTrees和他们的两个主要元素，ShadowHost和ShadowRoot交易。

注 - 在撰写本文时，有不到50％的支持（甚至前缀，越野通过默认支持）横跨五大浏览器的Web组件。虽然所有现代浏览器都支持<template>，只有最近的Chrome和Opera的版本完全支持ShadowDOM;与Firefox后支持它的部分您切换在about:config（dom.webcomponents.enabled）所需的功能为true。

使用ShadowDOM的目标是类似于MVC的separation of concerns。也就是说，我们希望我们的内容从我们的介绍分开，并允许在我们的代码封装模板，帮助使其更易于管理。我们在不同的编程语言已经有了这一点，但它仍然是在HTML和CSS一些时间的问题。此外，在造型Web应用程序元素时，可以有与类名冲突。

通常情况下，我们与LightDOM（一种“光王国”）的互动，但有时这将有助于采取封装的优势。跨入这种“影子王国”（Web组件的一部分）是为了防止通过允许封装上述问题的新方法。适用于您的ShadowTree来标记的任何样式不会应用到您的ShadowTree以外的标记，即使使用完全相同的类或选择。

当ShadowTree（其中居住在ShadowDOM）具有从内部它分布在LightDOM一棵树，和/或当ShadowTree呈现，其结果是由浏览器进入所谓的composed tree转换。

当浏览器呈现你的代码，内容的分发，并在比它身体类型等新位置插入。这种分布式的输出是你所看到的（和浏览器看到的），并且被称为composed tree。在现实中，内容不是原来的顺序输入，它现在出现，但你不会知道这一点，都不会对浏览器。 “最终结果”和“原代码”，如果你愿意，之间的分离是封装的主要好处之一。

Web Components & the Future of CSS是Web组件一个伟大的40分钟的视频并专门ShadowDOM，通过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的浏览器访问）

在这里，您可以看到::contentsection p伪元素首先选择ShadowRoot，这是div元素的内容在您的标记内容，然后通过添加section p进一步详细说明。

相比普通CSS选择器使用时（例如，为什么不使用section p {}？）这似乎是不必要的，直到你记得，穿越ShadowTree的时候，你不能host元素通常选择后代（其中分布式节点），因为他们在“阴影王国”我前面提到的。

5
投票

太糟糕了！不幸的是::content是V0，而被废弃。

您现在应该使用V1 ::slotted。

此外，<content>赞成<slot>的被弃用。

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

另请参阅：Web Components - why <content> was replaced with <slot>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.