섀도우 루트 요소의 스타일을 어떻게 재정의할 수 있나요?

섀도우 루트 요소의 스타일 재정의

Shadow DOM의 주요 기능 중 하나는 스타일 격리입니다. 이렇게 하면 외부 CSS 규칙이 섀도우 루트 내의 요소에 영향을 미치는 것을 방지하여 캡슐화 및 모듈성을 보장합니다. 그러나 섀도우 루트 내에 정의된 스타일을 재정의해야 할 때도 문제가 됩니다.

문제

귀하의 쿼리에 따라 섀도우 루트 요소, 특히 .the-class-name이라는 클래스에 정의된 CSS 속성입니다. 그러나 개발 도구에서 섀도우 루트의 스타일을 직접 조작하지 않으면 이를 달성할 수 없습니다.

문제

다음과 같은 CSS 규칙을 재정의하는 전통적인 방법 전역 CSS 규칙이나 :host 선택기를 사용하면 격리로 인해 섀도우 루트 요소에서는 작동하지 않습니다. Shadow DOM은 전역 CSS 규칙이 해당 범위로 유출되는 것을 방지하며 :host 선택기는 섀도우 루트 내의 요소가 아닌 섀도우 루트를 호스팅하는 요소에만 적용됩니다.

해결책

다행히 새 스타일을 섀도우 루트에 직접 삽입할 수 있는 해결 방법이 있습니다.

var host = document.querySelector('host-element'); // 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);

이 코드는 동적으로 새로운