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

@tabatkins perhaps I've misunderstood the spec (re: cascading in https://tabatkins.github.io/specs/css-apply-rule/#defining), but wouldn't the following result in overwritten styles?

Assuming an element `x-foo` with local DOM
```html
<template>
  <style>
    .inner {
      @apply --my-mixin;
    }
  </style>
  <div class="inner"></div>
</template>
```

And I use it on my page 
```html
<x-foo class="styled"></x-foo>
```

Then style all x-foo's on my page with some base styles, and some additional styles for this particular one
```css
x-foo {
  --my-mixin: {
    background: blue;
  };
}

/* Can't inherit background blue */
x-foo.themed {
  --my-mixin: {
    border: 1px solid red;
  };
}
```

`--my-mixin` doesn't cascade, so I can't compose with mixins. 

For an example of my particular use-case, I'm putting together a collection of style-agnostic UI elements ([SimpleElements](https://github.com/SimpleElements)), and applying a base look for them in our app, but if I touch one of them again then those base styles are overwritten and the whole notion becomes quite redundant.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/300#issuecomment-253691093