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

2019年7月28日 220次阅读

考虑以下：

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中执行此操作？

最佳答案 为什么不让基本组件类添加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变量.然后一切都将继承：主机css和你想要的显示.

点赞