그림자 루트 요소의 스타일 재정의

Question

그림자 요소에서 발견 된 스타일을 변경하는 방법이 있습니까? 특히, CSS 클래스에있는 일부 속성을 확장/덮어 쓰기 하시겠습니까? 나는 Beanote이라는 크롬 익스텐션을 사용 중입니다.이 익스텐션은 4 월 (2017) 이후 업데이트되지 않았으므로 수정하고 싶은 성가신 버그가 있습니다. 한 줄의 CSS가 나를 위해 충분하게 패치한다는 것을 알았지 만, 섀도 요소 자체에 들어가서 dev 도구에서 이러한 스타일을 직접 편집하지 않고 적용 할 때 손실이 발생했습니다.

나는 이것에 대한 방법을 찾고 있어요 : 쿼리 온라인

/* style tag inside the shadow-root */ 
.the-class-name { property-name: bad-value; } 

내가 찾은 자원의 대부분이 포함 :

/*global css rule*/ 
.the-class-name { property-name: my-value; } 

이 덮어 쓰기 shadow-root override style 또는 edit shadow-root styling은 :host과 관련이 있습니다. 그 의미가 있다면, 내 요구에 맞춰 작동하지 않거나 더 이상 사용되지 않는 기능 (예 : ::shadow)을 사용하지 마십시오.

Answer 1

그림자 DOM의 기능인 스타일 분리로 인해 그림자 DOM 범위에 적용될 전역 CSS 규칙을 정의 할 수 없습니다.

CSS 변수로 가능할 수 있지만 그림자 구성 요소에 명시 적으로 구현해야합니다 (타사 라이브러리에서는 그렇지 않음).

해결 방법은 그림자 DOM에 스타일 줄을 직접 주입하는 것입니다.

//host is the element that holds the shadow root: 
var style = document.createElement('style') 
style.innerHTML = '.the-class-name { property-name: my-value; }' 
host.shadowRoot.appendChild(style) 

NB : 그림자 DOM mode이 'open'로 설정되어있는 경우에만 작동합니다.