Re: [webcomponents] Support Custom Pseudo-elements (#300)

> That's such a cumbersome API. So if an author wanted to use a component and didn't want to expose any custom properties to it, then he/she has to do --: initial and selectively expose custom property. That's too much complexity just to style a part of component.

I'm not seeing the complexity.  Did you actually write it out and see what it would look like, compared to whatever else you'd want to do?

```css
/* set one variable for a sub-component,
   letting the outer page set the rest if they want */
sub-component { 
  --heading: { color: blue; text-decoration: underline; }
}

/* set one variable for a sub-component,
   and force the rest to be default value,
   blocking the outer page from setting anything */
sub-component {
  --: initial;
  --heading: { color: blue; text-decoration: underline; }
}
```

I'm not seeing the "too much complexity".

And note, we're comparing this to **a nonexistent, unknown syntax** for exposing or hiding the ::part()s of sub-components.  We have no idea if such a syntax will be blacklist or whitelist based, how it will be invoked, or what language we'll use for it.  (HTML attributes? JS api? CSS syntax?)  We have no clue what its complexity will be, because it doesn't exist yet.  This is one of many already-mentioned unanswered-so-far questions about the ::part syntax.

> I disagree. Nesting declarations of pseudo-class selectors inside custom mixins is extremely confusing.

You're free to disagree, but heavy usage of nesting in Sass and others goes against your feelings.  I'm not sure what the usage numbers are for the nearest direct analogue (Sass nesting within `@mixin` rules), but this doesn't look confusing in the slightest to me:

```css
sub-component {
  --heading: {
    color: blue;
    text-decoration: underline;
    &:hover { color: red; font-weight: bold; }
  };
}
```

Compare this to an assumed ::part-based syntax:

```css
sub-component::part(heading) {
  color: blue;
  text-decoration: underline;
}
sub-component::part(heading):hover {
  color: red; font-weight: bold;
}
```

Those look basically identical.  I won't fault ::part() for the extra selector verbosity there; if Nesting exists, it can be simplified to a basically identical form:

```css
sub-component::part(heading) {
  color: blue;
  text-decoration: underline;
  &:hover { color: red; font-weight: bold; }
}
```

-----

I just want to emphasize, again, that ::part() has a number of currently-unanswered questions about its functionality and syntax.  I outlined several of them up above in a previous comment.  They certainly *can* be addressed, but haven't been so far, and when they are, several of them will imply further syntax and complexity for the feature.  Custom properties and @apply/Nesting, on the other hand, have answers to all those questions right now; they fall out of the definitions of the feature.

For more complex cases, until we actually answer the relevant questions for ::part (such as how sub-component ::parts are exposed or hidden), we won't have the ability to do good comparisons with anything else.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/300#issuecomment-144574826