相关疑难解决方法(0)

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

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

我在这篇 CSS-Tricks文章中听说过它,解释了如何将图像滑块实现为Web组件的示例用例.它出现在里面的代码示例是:

CSS

#slides ::content img {
   width: 25%;
   float: left;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

它似乎是指这个<content>标签,用于允许用户包含Web组件,但我想更深入地理解这一点.

编辑:

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

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

::content h1 {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

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

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

css html5 web-component shadow-dom html5-template

74
推荐指数
2
解决办法
6540
查看次数

标签 统计

css ×1

html5 ×1

html5-template ×1

shadow-dom ×1

web-component ×1