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

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

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

이 코드는 동적으로 새로운

참고: 이 해결 방법은 Shadow DOM 모드가 'open'으로 설정된 경우에만 작동합니다.

업데이트(Chrome 73 및 Opera 60용)

Chrome 73 및 Opera 60이 출시되면서 섀도우 루트에서 스타일을 재정의하는 새로운 기술을 사용할 수 있게 되었습니다.

var sheet = new CSSStyleSheet;
sheet.replaceSync('.color { color: pink }');
host.shadowRoot.adoptedStyleSheets.push(sheet);

이 방법에는 CSSStyleSheet 개체를 생성하고 이를 섀도우 루트의 AdoptedStyleSheets 배열에 추가하는 작업이 포함됩니다. 그런 다음 새 스타일 시트를 사용하여 기존 스타일을 재정의할 수 있습니다.

위 내용은 섀도우 루트 요소의 스타일을 어떻게 재정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!