如何使用CSS选择子类自定义元素

Question

考虑以下：

class MyElem extends HTMLElement {};
customElements.define('my-element', MyElem);

class MyMoreSpecificElem extends MyElem {};
customElements.define('my-more-specific-element', MyMoreSpecificElem);

在对象继承的说法中，第二类的实例与第一类的实例具有'is-a'关系：MyMoreSpecificElem是MyElem。

这种关系在JavaScript中捕获：

let subclassInstance = document.querySelector('my-more-specific-element');
let parentClass = document.querySelector('my-element').constructor;

subclassInstance instanceof parentClass; // true

但我想不出用CSS选择器选择所有MyElems（包括子类MyMoreSpecificElem）的方法。标签选择器只能获取超类或子类，而我所知道的所有关系描述选择器（例如〜，>）都是关于文档中的位置，而不是类层次结构。

我的意思是，当然，我可以在构造函数中添加一个CSS类，然后选择它，调用super将确保甚至可以选择子类实例。但那是粗糙的。有没有办法在纯CSS中执行此操作？

Answer 1

为什么不让基本组件类添加className值或将为基本组件类和所有子组件类设置的属性。然后可以根据此className值或属性设置CSS。

class MyBaseEl extends HTMLElement {
  connectedCallback() {
    this.classList.add('my-base-el');
    this.innerHTML = '<div>Base El</div>';
  }
}

customElements.define('my-base-el', MyBaseEl);

class MySubEl extends MyBaseEl {
  connectedCallback() {
    super.connectedCallback();
    this.innerHTML = '<div>Sub El</div>';
  }
}

customElements.define('my-sub-el', MySubEl);

.my-base-el {
  background-color: #FF0;
  display: block;
  outline: 1px dashed black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
<my-base-el></my-base-el>
<my-sub-el></my-sub-el>

这使用className值来允许CSS获取MyBaseEl或子类的所有元素。

或者像这样：

class MyBaseEl extends HTMLElement {
  connectedCallback() {
    this.setAttribute('my-base-el', '');
    this.innerHTML = '<div>Base El</div>';
  }
}

customElements.define('my-base-el', MyBaseEl);

class MySubEl extends MyBaseEl {
  connectedCallback() {
    super.connectedCallback();
    this.innerHTML = '<div>Sub El</div>';
  }
}

customElements.define('my-sub-el', MySubEl);

[my-base-el] {
  background-color: #FF0;
  display: block;
  outline: 1px dashed black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
<my-base-el></my-base-el>
<my-sub-el></my-sub-el>

这使用一个属性来允许CSS获取所有MyBaseEl或子类的元素。

UPDATE

为多个元素标记设置CSS的唯一另一种方法是知道它们是什么，并使css适用于所有这些，如下所示：

my-base-el, my-sub-el, my-other-sub-el, the-third-sub-el {
  background: #000;
  color: #fff;
}

但是，如果其他人可以创建其他子类，那么您需要添加到列表中。

更新2

为什么不在基类中设置:host并让它为您希望用户能够更改的样式使用CSS变量。然后一切都将继承:host css并显示你想要的。