jon jon - 2 months ago 12
CSS Question

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'.

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>


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.

EDIT:

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:


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;
}


Source: 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?

Answer

Too bad! Unfortunately ::content is v0, and was deprecated.

You should now use the v1 ::slotted.

Also, <content> was deprecated in favor of <slot>.

Please see: http://hayato.io/2016/shadowdomv1/

Also see: Web Components - why <content> was replaced with <slot>

Comments