[csswg-drafts] [css-contain] Clarify style containment property scopment

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] Clarify style containment property scopment ==
CSS Contain says that [style containment](https://drafts.csswg.org/css-contain/#containment-style) scopes some properties "to the element’s sub-tree". This is defined as follows:

> A scoped property has its effects scoped to a particular element or subtree. It must act as if the scoping element was the root of the document for the purpose of evaluating the property’s effects: any uses of the property outside the scoping element must have no effect on the uses of the property on or in the scoping element, and vice versa.

I think it's a bit confusing that the clear and complete definition is about scoping to an element, given that style containment scopes to a subtree instead. But this other definition is only provided at the end as an addendum:

> If scoped to a sub-tree, it’s the same, except the scoping element itself is counted as "outside" the tree, like the rest of the document.

Maybe consider defining subtree scopment first? Anyways, various CSS specs assume that there is a single root element, but if the scoping element is "outside" the tree, I guess its children are "roots". So you are dropping an important CSS invariant like it's nothing. For example, if the parent of these children is "outside" the tree, are they still considered to be siblings? This is important for [counter inheritance](https://drafts.csswg.org/css-lists/#creating-counters).

Then the example:

> For example, if `counter-increment` is scoped to an element, the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element

If I understand properly, this should say "scoped to an element’s sub-tree". Otherwise the element is not considered to be "outside" the tree, and thus the named counter may not be 0.

It would be helpful if the quote was converted to a real example with HTML, CSS and the expected rendering. Something like

```html
<div>
  <p>aaa</p>
  <p>bbb</p>
</div>
```
```css
div {
  contain: style;
  counter-increment: c 123;
}
p::before {
  content: counter(c) '/ ';
  counter-increment: c 1;
}
```

Chrome renders it as

> 1/ aaa
> 1/ bbb

But in bug #1887 it was resolved that new counters should be created "at style scoping root" (I guess this refers to the contained element and not to its children which become "roots" because their parent is "outside" the tree). So I wonder if the result should be this instead?

> 1/ aaa
> 2/ bbb

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2349 using your GitHub account

Received on Thursday, 22 February 2018 18:49:57 UTC