Re: [csswg-drafts] [css-scoping] Handling global name-defining constructs in shadow trees

I would argue that the expected behaviour is for the bare reference (`font-family: foo`) to always refer to the local scope by default. My argument is that I feel CSS behaviour should be the same in a scoped environment and a global environment; it would be weird that it takes a different syntax to define a font and use it depending on the scope it is defined in. Under the proposal by @tabatkins the following code would have a different meaning depending on if it was defined in the global scope or inside a ShadowRoot:

```css
@font-face { font-family: foo; ... }
p { font-family: foo; }
```

The expectation from a developer standpoint is that when using the normal syntax, styles within a ShadowRoot behave like they are in their own global scope, and do not interact with outside styles. There are some cases where alternative syntax is needed to resolve scoping issues (like the `::slotted()` syntax), but the default syntax should always have the expected behaviour of treating the local scope as if it was the global one. (i.e. `p { ... }` should apply to `<p>` elements in the ShadowRoot, not elements slotted through `<slot>`)

I am suggesting this behaviour:

- The bare reference `font-family: foo` always refers to the local scope.
- If that reference is not available in the local scope, the lookup cascades to higher scopes until it finds a matching reference
- There is a separate syntax to refer to the global scope, or a specific scope, `font-family: scoped(foo, <integer> | global)`

The difference between @tabatkins' suggested behaviour is that the bare reference `font-family: foo` is a shorthand for `font-family: scoped(foo, 0)` (instead of defaulting to global)


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

Received on Tuesday, 20 February 2018 21:53:19 UTC