是否有派生 HTML 自定义元素的 CSS 选择器？答案

【问题标题】：Is there a CSS selector for derived HTML custom elements?是否有派生 HTML 自定义元素的 CSS 选择器？
【发布时间】：2020-05-18 19:20:16
【问题描述】：

假设有一个以典型方式定义的自定义 HTML 元素，另一个继承自它：

class CEParent extends HTMLElement { constructor() { super(); } }
class CEChild  extends CEParent    { constructor() { super(); } }
customElements.define("ce-parent", CEParent);
customElements.define("ce-child",  CEChild);

现在假设 HTML 仅包含对 <ce-child></ce-child> 元素的引用。是否可以根据ce-parent 选择/样式<ce-child>？

喜欢

ce-parent:and-derived-too {
    ...
}

【问题讨论】：

不，CSS 用于 DOM 元素，CSS 没有 JavaScript 元素的概念。您也许可以根据this.constructor.name 生成 CSS？
@Danny '365CSI' Engelman：CSS 可以很好地定位和设置自定义元素。这里的问题是它无法区分自定义元素和内置元素（如 p 或 body），更不用说派生自特定其他自定义元素的自定义元素了。
是的，元素 X 使用 Javascript 从 Y 扩展。 CSS没有元素X“父母”的概念。所以用 JS 上原型链，然后动态创建 CSS 是一种选择

标签： css-selectors custom-element

【解决方案1】：

这会将父元素名称分配为每个元素上的 CSS 类

需要一些字符串处理，因为constructor.name 是匿名函数的“”（空字符串）

所以 DOM 中的 Bono (U2) 是：

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

【讨论】：