섀도우 트리의 요소에 CSS 속성 스타일 설정하기

1516 단어 shadowdomcssionichtml
IONIC에 Shadow DOM을 도입한 후, 우리 대부분은 IONIC 구성 요소의 스타일을 수정하는 방법을 검색하고 찾고 있다.다행히도, 그들은 많은 css4 변수를 공개하여 구성 요소를 수정했지만, 우리는 그림자DOM의 html 요소에 접근할 수 없습니다.

공개된 css4 변수 업데이트 스타일을 어떻게 사용합니까?



이온 버튼
- 경계 반지름: 2px;
- 배경: #3A2926;
- 색상: #DBE0A5,
}

미공개 속성의 스타일은 어떻게 업데이트합니까?



위의 화면 캡처에서, 우리는 아래의 일반적인 CSS 스타일을 사용하여 그림자 DOM 외부에서 커서, z 인덱스, 상자 크기 등 속성을 수정할 수 없습니다.
이온 버튼
커서:십자선;
z지수: 2;
상자 크기: 내용함;
}
위 등록 정보를 업데이트하는 방법
섀도우 부분 선택기를 사용하여 이러한 속성을 업데이트할 수 있습니다.
이온 버튼
&: 부분(로컬)
커서:십자선;
z지수: 2;
상자 크기: 내용함;
}
}
나는 이것이 많은 개발자들을 도울 수 있기를 바란다.

리소스


https://ionicframework.com/docs
https://ionicframework.com/docs/theming/css-shadow-parts

좋은 웹페이지 즐겨찾기