다트 웹 구성 요소의 내부 요소 스타일을 지정하는 방법은 무엇입니까?

Question

다트 "꿀벌"웹 구성 요소 패키지 (bee)의 popover 구성 요소를 가지고 놀고 있습니다.

그러나 구성 요소의 내부 요소에 대한 기본 스타일을 변경하는 방법을 볼 수 없습니다. <div class="x-popover-dialog">의 스타일을 변경하여 모서리가 둥글게되도록하고 싶습니다. 그러나, 내 응용 프로그램의 CSS 파일에 다음을 추가하면 "out"폴더에 도착할 때까지 제거됩니다.

.x-popover-dialog { 
    border-radius: 6px; 
} 

웹 구성 요소 자체를 실제로 수정하거나 확장하는 유일한 방법입니까?

감사합니다.

Answer 1

좋아요, 여기에는 여러 가지 요인이 있습니다. 첫째, 구성 요소 내에 정의 된 클래스를 다시 정의 할 수 없습니까? 요소가 자체 스타일을 지정하지 않으면 현재 구성 요소에 고유 한 스타일을 적용 할 수 있습니다. 예를 들어 구성 요소의 'p'요소에서 글꼴 크기를 변경할 수 있습니다. 또는 div#someid { color: red; }라고 말하지만 클래스를 다시 정의하거나 클래스에 정의를 추가 할 수는 없습니다.

명시 적으로 허용되지 않는 한 모든 스타일을 수정할 수 있다는 사실은 web_ui의 버그입니다. 현재 다음과 같이 추적됩니다 : Issue 374 : 지원 작성자 스타일.

완벽하게 지원되는 경우 웹 구성 요소 자체에서 명시 적으로 허용하지 않는 한 웹 구성 요소에 자신의 스타일을 적용 할 수없는 것이 이상적입니다. apply-author-styles 및 관련 reset-style-inheritance에 대한 자세한 내용은 Shadow DOM 201 자습서를 참조하십시오.