Shadow-Root 요소의 스타일을 재정의하는 방법은 무엇입니까?

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

Shadow DOM은 스타일 격리를 제공하여 전역적으로 정의된 CSS 규칙이 섀도우 내의 요소에 영향을 미치지 않도록 방지합니다. 나무. 그러나 특히 대상 요소가 직접 수정할 수 없는 타사 라이브러리 내에 있는 상황에서는 이러한 그림자 범위 스타일을 재정의해야 하는 경우가 있을 수 있습니다.

특정 속성 재정의

shadow-root 요소 내에 정의된 특정 속성을 덮어쓰려면 스타일 요소를 Shadow DOM에 직접 삽입할 수 있습니다. 여기에는 다음이 포함됩니다.

1. 스타일 요소 생성:

   var style = document.createElement('style');

2. 우선 규칙으로 스타일 요소의 innerHTML 설정:

   style.innerHTML = '.the-class-name { property-name: my-value; }';

3. 상위 요소의 ShadowRoot에 스타일 요소 추가:

   host.shadowRoot.appendChild(style);

Chrome 73 및 Opera 60용 2019 업데이트

Chrome 73 및 Opera 60에 도입된 더 나은 접근 방식은 CSSStyleSheet 객체를 생성하고 이를 Shadow DOM 또는 문서와 연결하는 것입니다.

1. 만들기 CSSStyleSheet 객체:

   var sheet = new CSSStyleSheet;

2. 재정의 규칙으로 CSSStyleSheet 객체 수정:

   sheet.replaceSync('.color { color: pink }');

3. AdoptedStyleSheets에 스타일 시트 추가 Shadow DOM 배열:

   host.shadowRoot.adoptedStyleSheets.push(sheet);

이 방법을 사용하면 보다 효율적이고 동적인 스타일 재정의가 가능합니다. 그러나 예상치 못한 동작을 방지하려면 동일한 스타일 시트를 여러 번 추가하지 않는 것이 중요합니다.

위 내용은 Shadow-Root 요소의 스타일을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!