Re: [csswg-drafts] [css-pseudo] Add a ::contents pseudo-element (#2406)

I had a go at implementing this on an idle day a few weeks back, just to see how it would work. I think the concept is quite clean overall and, of all the proposed pseudo-class layers this one seems the most coherent.

But I think there's some clarification required around the interaction of the `::contents` pseudo-element and `content: contents`, in particular when it's used to move the content of an element to a pseudo-element, like so:

```css
span::before {
    content: '(A=' contents ')';
}
span {
    content: none;
}
span::after {
    content: '(B)'
}
<span>test</span>
```
```
(A=test)(B)
```
(For those of you raising an eyebrow at this: here's the [content](https://www.w3.org/TR/css-content-3/#content-property) property definition)

My question is, if I then add a new style with the ::contents pseudo-element, where does it go?
```css
span::before {
    content: '(A=' contents ')';
}
span {
    content: none;
}
span::after {
    content: '(B)'
}
span::contents {
    border: 1px solid red;
    padding: 0px 5px;
}
<span>test</span>
```
There are two options here.

1. The pseudo-element is placed between the ::before and ::after pseudo-elements, but has no content. You get the following boxes (and an empty red box):
```
<span><::before>(A=test)</::before><::contents></::contents><::after>(B)</::after></span>
```

2. The ::contents pseudo-element always wraps the "contents", even if it's moved to a pseudo-element. You get the following boxes (and a red outline around "test"):
```
<span><::before>(A=<::contents>test</::contents>)</::before><::after>(B)</::after></span>
```


As @Loirooriol's draft proposal is now, you get option 1. Personally I think option 2 is more useful, however there are some caveats:

1. The end result is a pseudo-element inside a pseudo-element. But, very importantly, this is only for layout. Styling is unaffected: `::before::contents` would not match anything.

Actually that's all I've got. If we can get this resolved one way or another, I'll have another go at implementing.

I'd also like to point out that the `::contents` element is conceptually almost identical to the https://drafts.csswg.org/css-regions/#regions-flow-content-box. So there's precedent. Sort-of.

-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2406#issuecomment-581016564 using your GitHub account

Received on Saturday, 1 February 2020 10:33:40 UTC