Rob Dodson
Chrome 63부터 섀도우 피어싱 선택기 ::shadow 및 /deep/를 사용하여 섀도우 루트 내부의 콘텐츠 스타일을 지정할 수 없습니다.
/deep/연결자는 하위 요소 선택기 역할을 합니다.x-foo /deep/ div는x-foo div처럼 작동합니다.::shadow유사 요소는 어떤 요소와도 일치하지 않습니다.
삭제 결정은
::shadow 및 /deep/는 Chrome 버전 45에서 지원 중단되었습니다. 이 결정은 2015년 4월 웹 구성요소 정기 모임의 참가자 모두가 결정한 사항입니다.
섀도 피어싱 선택기의 주요 문제는 캡슐화를 위반하고 구성요소가 더 이상 내부 구현을 변경할 수 없는 상황을 만드는 것입니다.
CSS 그림자 파트 사양은 섀도우 피어싱 선택기의 대안으로 진화하고 있습니다. 그림자 부분을 사용하면 구성요소 작성자가 캡슐화를 보존하는 방식으로 이름이 지정된 요소를 노출할 수 있으며 페이지 작성자는 한 번에 여러 속성의 스타일을 지정할 수 있습니다.
사이트에서 ::shadow와 /deep/?를 사용하는 경우 어떻게 해야 하나요?
::shadow 및 /deep/ 선택기는 기존 Shadow DOM v0 구성요소에만 영향을 미칩니다. Shadow DOM v1을 사용하는 경우 사이트의 어떤 것도 변경할 필요가 없습니다.
Chrome Canary를 사용하여
사이트에 새로운 변경사항이 적용되었는지 확인할 수 있습니다. 문제가 발생하면 ::shadow 및 /deep/ 사용을 모두 삭제해 보세요. 이러한 선택기 사용을 삭제하기가 너무 어려우면 네이티브 shadow DOM에서 의심스러운 DOM 폴리필로 전환하는 것이 좋습니다. 사이트에서 네이티브 Shadow DOM v0을 사용하는 경우에만 이렇게 변경해야 합니다.