Re: [csswg-drafts] [css-shadow-parts] confirm browser support

So, let's say I have nested components `<x-foo>`, `<x-bar>`, `<x-baz>` and `<x-quux>`, the last of which has a `part="label"` element.

For simplicity, all forward with the relevant name, that is, in x-foo, we have: `<x-bar part="* => bar-*">` (did I get the syntax right?), in x-bar we have `<x-baz part="* => baz-*">`, and so on.

That means I can target the label from the outer scope like:

```css
::part(bar-baz-quux-label) { /* stuff */ }
```

Right?

My question is, would that same selector match the same label, even if it was declared in one of the inner scopes? I guess the intention is that it does not, and that's the bit that makes a `::part(..)` selector depend on where the selector is declared / in which scope it does live. In particular, in the design doc linked by @fergald, this is the problematic condition (emphasis mine):

> **Having reached the scope containing the selector** succeed if any of the names of the element in this scope match the name in ::part() component.

I'm not saying it's impossible to implement or anything like that, I just think that's a somewhat new requirement that deserves some thought. What should:

```js
shadowRoot.querySelector("[part=label]").matches("::part(label)")
```

return?

What about:

```js
shadowRoot.querySelector("[part=label]").matches("::part(bar-baz-quux-label)")
```

Does something like `:host::part` work, thus allowing you to style parts from _inside_ the component?

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

Received on Thursday, 1 March 2018 23:40:34 UTC