Question

请考虑以下事项：

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

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

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

此关系在JavaScript中捕获：

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

subclassInstance instanceof parentClass; // true

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

或者像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

<强>更新

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

＆＃13;

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

＆＃13;

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

更新2

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

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

1 个答案: