CSS 선택기에서 / deep / 및 :: shadow는 무엇을 의미합니까?

CSS 선택기에서 / deep / 및 :: shadow는 무엇을 의미합니까?

---

Polymer를 살펴보면 Chrome 37 개발자 도구의 스타일 탭에 다음 CSS 선택기가 표시됩니다 .

나는 또한 의사 선택자가있는 선택기를 보았다 ::shadow.

그래서, 무엇 /deep/과 ::shadowCSS의 셀렉터 평균에?

---

---

Joel H.가 주석에서 지적했듯이 Chrome은 이후 /deep/combinator를 사용하지 않으며 IE에서 구문 오류를 제공합니다.

---

HTML5 웹 구성 요소는 CSS 스타일의 전체 캡슐화를 제공합니다.

이는 다음을 의미합니다.

• 구성 요소 내에 정의 된 스타일은 유출되어 페이지의 나머지 부분에 영향을 미칠 수 없습니다.
• 페이지 수준에서 정의 된 스타일은 구성 요소의 자체 스타일을 수정하지 않습니다.

그러나 때로는 Shadow DOM 내에 정의 된 구성 요소 요소의 표현을 조작하기 위해 페이지 수준 규칙이 필요합니다. 이를 위해 /deep/CSS 선택기에 추가 합니다.

따라서 표시된 예에서는 웹 구성 요소의 섀도우 DOM 루트 내부에있는 요소를 포함 하여 속성 이있는 (최상위 수준) html /deep/ [self-end]요소 아래의 모든 요소를 ​​선택합니다 .htmlself-end

선택한 요소가 섀도우 루트 내에 있어야 하는 경우 ::shadow상위 요소 에서 의사 선택기를 사용할 수 있습니다 .

중히 여기다:

<div>
  <span>Outer</span>
  #shadow-root
  <my-component>
    <span>Inner</span>
  </my-component>
</div>

선택기 html /deep/ span는 두 <span>요소를 모두 선택합니다 .

선택기 ::shadow span는 내부 <span>요소 만 선택합니다 .

이에 대한 자세한 내용은 W3C의 CSS 범위 지정 모듈 사양을 참조하십시오.

참고 URL : https://stackoverflow.com/questions/25609678/what-do-deep-and-shadow-mean-in-a-css-selector