Chrome 63에서 ::shadow 및 /deep/ 삭제

Chrome 63부터 섀도우 피어싱 선택기 ::shadow/deep/를 사용하여 섀도우 루트 내부의 콘텐츠 스타일을 지정할 수 없습니다.

  • /deep/ 연결자는 하위 요소 선택기 역할을 합니다. x-foo /deep/ divx-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을 사용하는 경우에만 이렇게 변경해야 합니다.

추가 정보

삭제 의도 | Chromestatus Tracker | Chromium 버그