[w3c/webcomponents] Add a CSS subtype selector. (#719)

Consider the following:
```javascript
class MyElem extends HTMLElement {};
customElements.define('my-element', MyElem);

class MyMoreSpecificElem extends MyElem {};
customElements.define('my-more-specific-element', MyMoreSpecificElem);
```
In the parlance of object inheritance, instances of the second class have an 'is-a' relationship with the first: a MyMoreSpecificElem *is a* MyElem.

This relationship is captured in JavaScript:
```javascript
let subclassInstance = document.querySelector('my-more-specific-element');
let parentClass = document.querySelector('my-element').constructor;
subclassInstance instanceof parentClass; // true
```

But there is no seamless way to capture this relationship using CSS selectors. All of the current CSS relational selectors (e.g. `thing1 > thing2`, `thing1 ~ thing2`) deal with document position, not inheritance.

Since the whole point of inheritance is re-use, that's kind of a bummer: if some UI library offers up a card-element and I want to make a my-fancy-card-element those styles should carry over.

Certainly one can add a CSS class or attribute (the latter being more in keeping with the best practices guidelines) in the constructor and select on that (call to `super` will take care of subclass instances), but that seems like a hacky workaround for a lack of something that should be built-in.


-- 
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/719