Shadow DOM 스타일링하는 방법

셀렉터는 섀도 경계(Shadow Boundary)를 넘지 못한다.

 

 

내부에서 shadow dom 스타일링 하기

 

1. :host 선택자

 

 

 

 

2. :host(<selector>) 를 이용해 테마 적용하기

 

 

 

 

 

외부에서 shadow dom 스타일링 하기

 

1. var 이용하기

 

 

 

 

스타일 상속 및 재설정하기

resetStyleInheritance (deprecated)

false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지합니다.

true -shadow boundary에서 상속가능한 속성들을 initial으로 재설정합니다.

applyAuthorStyles (deprecated)

false - 디폴트. 개발자가 작성한 style 문서 내에 정의된 속성은 섀도 트리에 적용되지 않습니다.

true - 개발자가 작성한 style 문서 내에 정의된 속성을 적용합니다. 

 

 

대신, CSS All 사용하세요.

 

/* Global values */
all: initial; /* 모든 요소의 속성이 초기 값 으로 변경되어야 함 */
all: inherit; /* 모든 요소의 속성이 상속된 값 으로 변경되어야 함 */
all: unset; /* 모든 요소의 속성이 기본적으로 상속되는 경우 상속된 값으로 변경되고 그렇지 않은 경우 초기 값으로 변경되어야 함 */
all: revert; /* 선언이 속한 스타일시트 원본에 따라 달라지는 동작을 지정합니다.?? */

 

 

 

 

 

 

출처: https://www.html5rocks.com/ko/tutorials/webcomponents/shadowdom-201/    

https://developer.mozilla.org/en-US/docs/Web/CSS/all