Modify :is() and :where() to support selecting derived node types

[sirisian]

I think this fits with Web Components as they deal with derived HTMLElements.

Right now when you want to refer to all inherited items you must use :is() and manually list the base class and derived items. When you want anyone to be able to extend things and have rules apply to their new component this is not ideal.

Alternatives (mentioned to me by @annevk) is to add a state in the base class element which is then set for all derived. While that works it seems arbitrary like adding an attribute or class.

The example I had in mind is I have a ui-treenode, ui-node (graph nodes), and others. My ui-node extends ui-treenode so it can just be dropped into trees or have child elements in certain cases. A lot of the CSS rules should apply to everything derived from ui-treenode, so one would just use :is(ui-treenode / all) ... in the web component CSS or in global CSS.

The syntax proposed :is(ui-treenode / all) where derived can be default (matches base only and is the default), all(matches base class and derived), or derived (matches derived only and not base class). (Feel free to use more standard names and change this syntax since I just made it up for this example). :where would support identical syntax.

My initial thinking was to have a separate syntax like is-a(), but then that could result in nesting inside of :is() which is verbose compared to just writing :is(ul, li, ui-button / all). So I think adding something :is() would be a minimal solution. Unsure if any other proposals are connected to that pseudo-class.