방법

Question

다음과 같은 고려 CSS와 하위 분류 사용자 정의 요소를 선택 : 객체 상속의 말투에서

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

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

을, 두 번째 클래스의 인스턴스가있다 '는-A'처음과의 관계하십시오 MyMoreSpecificElem은MyElem입니다.

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

subclassInstance instanceof parentClass; // true 

하지만 CSS 선택기를 사용하여 (서브 클래스 MyMoreSpecificElem 포함) 모든 MyElem의를 선택 할 수있는 방법을 생각할 수 없다 :

이 관계는 자바 스크립트로 캡처됩니다. 태그 선택기는 수퍼 클래스 또는 하위 클래스 만 가져오고 내가 알고있는 모든 관계 설명 선택기 (예 : ~,>)는 클래스 계층이 아닌 문서의 위치에 관한 것입니다.

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

이것은 CSS가 MyBaseEl 또는 하위 클래스의 모든 요소에서 얻을 수 있도록하기 위해 className 값을 사용합니다.

또는 같은

는 :

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 및 원하는대로 표시하십시오.