Re: [w3c/webcomponents] observedStyles (#856)

As a concrete example where I've wanted this is changing internal DOM to change between two styles of math.

For example choosing between this:

<img width="88" alt="Screen Shot 2020-01-07 at 6 22 08 pm" src="https://user-images.githubusercontent.com/8518303/71876352-a3acbf80-317a-11ea-853a-dcd8689efac2.png">

And this:

<img width="90" alt="Screen Shot 2020-01-07 at 6 22 55 pm" src="https://user-images.githubusercontent.com/8518303/71876404-bde69d80-317a-11ea-90fb-92a22e5cadc2.png">

Both are semantically equivalent math notation and choosing between them is just a stylistic preference so it would be natural to be able to encode these into the stylesheet e.g.:

```css
math-expression {
  --summation-style: superscript subscript;
}

@media (orientation: portrait) {
  /* Consume vertical space instead on portrait screens */
  math-expression {
    --summation-style: over under;
  }
}
```

Without `observedStyles` this is more painful for a consumer of such a component as they will need to explicitly watch the media queries themselves and update an attribute on every element that has such a property. And it's not inherited through shadow roots either unlike custom properties.

-- 
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/856#issuecomment-571470145