1
그림자 DOM에 슬롯 요소에 의사 요소 뒤에 :: 추가 할 수 없습니다 : https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom내가 에릭 Bidelman의 <code><fancy-tabs></code> 그림자 DOM의 예를 실험했다
와의 추가가 필요하는, 그것을 소재 디자인 스타일을 추가하려고했다 : 탭에 가짜 요소 후. https://jsbin.com/maqaze/edit?html,output
바닐라 JS 예 :
몇 가지 실험 후에 나는 바닐라 JS를 사용할 때 표시 할 의사 요소를 적용하기위한 내부 스타일이 ...
폴리머 예를 폴리머를 사용하여 사용할 수는 있지만,하지 않는 것을 발견 :
이 두 번째 예에서는 : after 의사 요소를 적용하는 것이 그림자 dom내에서 작동하지 않습니다. 분명히 외부 적으로 설정해야합니다.
https://jsbin.com/toxalu/edit?html,output
그래서 외부 스타일을 사용하지 않고도, 어떻게 당신이 슬롯/라이트 DOM 요소에 의사 요소를 추가하는 방법에 대한 가야되는 내 질문에,? 폴리머 1.0 정말하지 않는 기본 ::slotted 의사 요소를 사용한다는 사실 때문이다 폴리머에서 작동하는 것 같다 경우
그림자 DOM의 주요 포인트는 CSS 스타일을 _outside_에서 분리하는 것입니다. 당신이 요구하는 것을함으로써, 당신은 실제로 역효과를 낳을 것입니다. 그림자 DOM 안에 light-DOM 요소가 있다면 shadow DOM 바깥으로 스타일을 지정해야합니다. – alesc
스펙을 사용하면 '분산'노드 (즉, 요소의 섀도우 트리에있는 사용자 기여 light-dom)의 스타일을 수정할 수 있습니다. https://developers.google.com/web/fundamentals/getting-started/primers/ shadowdom # stylinglightdom 내가 물어 보는 질문은 CSS 유사 요소 속성을 수정할 수 있는지 여부입니다. after 및 : before. 아마도 이것은 light dom에 '상자를 추가하는'것으로 간주되며 허용되지 않습니다. 위에서 언급 한 Polymer 예제에서 작동한다는 사실에 던져졌습니다. 그러나 아마도 그 구현 자체에 문제가 있습니까? – evaneus