Is there a CSS selector for derived HTML custom elements? - css-selectors

Question

Say there is a custom HTML element defined in the typical way, and another that inherits from it:
class CEParent extends HTMLElement { constructor() { super(); } }
class CEChild extends CEParent { constructor() { super(); } }
customElements.define("ce-parent", CEParent);
customElements.define("ce-child", CEChild);
Now suppose the HTML contains only references to <ce-child></ce-child> elements. Is it possible to select / style <ce-child> in terms of ce-parent?
Like
ce-parent:and-derived-too {
...
}
?

Answer 1

This assigns parent Element names as CSS class on every element
Requires some string handling, because constructor.name is "" (empty string) for Anonymous functions
So Bono (U2) in the DOM is:
<style>
body {font-size:1.2em }
.Homininae {background: lightgreen; display:block;clear:both }
.Hominini {background:green; }
.Homo {color: gold; }
*:after { content:attr(class); float:right}
</style>
<script>
class Homininae extends HTMLElement {
connectedCallback() {
function proto(ref, chain = '', str = ref.toString()) {
if (str.slice(0, 5) === "class")
return proto(ref.__proto__, chain + " " + str.match(/class (\w*)/)[1]);
else return chain;
}
let classes = proto(this.constructor.__proto__);
this.className = classes;
this.innerHTML = `<b>${this.innerHTML}</b> (${this.nodeName}) `;
}
}
class Gorillini extends Homininae {};
class Hominini extends Homininae {};
class Pan extends Hominini {};
class Homo extends Hominini {};
customElements.define('a-human' , class extends Homo {});
customElements.define('a-bonobo' , class extends Pan {});
customElements.define('a-chimpanzee', class extends Pan {});
customElements.define('a-gorilla' , class extends Gorillini {});
</script>
<a-human>Bono</a-human>
<a-bonobo>Kanzi</a-bonobo>
<a-chimpanzee>Ham the Astrochimp</a-chimpanzee>
<a-chimpanzee>Bonzo</a-chimpanzee>
<a-gorilla>Koko</a-gorilla>