jon jon - 1 year ago 53
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

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:


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


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

It seems to be referring to this
tag, which is used to allow the user to include Web Components, but I would love to understand this more deeply.


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


This is helpful, but I still find the whole affair rather opaque. Any additional insights?

Answer Source

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:

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