首页 文章

什么是:: content / :: slotted伪元素以及它是如何工作的?

提问于
浏览
70

这对Google来说是不可能的,因为每篇关于 :before:after 伪元素的文章似乎都使用了'content'这个词 .

我在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组件,但我想更深入地理解这一点 .

EDIT:

在进一步阅读之后,在上述文章中,我发现了作者的"Shadow DOM CSS Cheatsheet"链接,其中包含一段解释 ::content 伪元素的内容:

选择元素内的分布式节点 . 需要与不支持本机选择器的浏览器的polyfill-next-selector配对 .

::content h1 {
    color: red;
}

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

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

2 回答

  • 99

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

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


    原始答案:


    Summary:

    ::content 本质上是一种深入挖掘 ShadowHost 的后代的方法,通常不知道在没有 ::content 的情况下寻找ShadowDOM片段 .


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

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

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

    通常,我们与 LightDOM (某种"Light Realm")进行交互,但有时利用封装会很有帮助 . 跨越这种"Shadow Realm"(Web组件的一部分)是一种通过 allowing encapsulation 来防止上述问题的新方法 . 在 ShadowTree 中应用于标记的任何样式都不适用于 ShadowTree 之外的标记,即使使用完全相同的类或选择器也是如此 .

    ShadowTree (它位于 ShadowDOM 中)有一个分布在其中的 LightDOM 树,和/或呈现 ShadowTree 时,浏览器将结果转换为所谓的 composed tree .

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

    Web Components & the Future of CSS 是关于Web Components的40分钟视频,特别是ShadowDOM,由ZachSaucier向我指出 .


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

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

    考虑到ShadowDOM的范围,即范围和封装,你必须意识到这个新的ShadowTree与你的其他内容不同"Light Realm";它在"Shadow Realm" . 那么,CSS如何知道如何定位"Shadow Realm"?通过使用 ::content 伪元素!

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

    HTML5Rocks有一系列精彩的教程hereherehere,它们涵盖了更多信息,并提供了一些很好的示例(请确保访问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 {} ?),直到你回想起,当遍历 ShadowTree 时,你通常不能选择 host 元素的后代(分布式节点是),因为它们在我之前提到的_172722中 .

  • 5

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

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

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

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

    另见:Web Components - why <content> was replaced with <slot>

相关问题