:: content / :: slotted 가상 요소는 무엇이며 어떻게 작동합니까?

:: content / :: slotted 가상 요소는 무엇이며 어떻게 작동합니까?

---

:before그리고 :after의사 요소 에 대해 이야기하는 모든 기사가 '콘텐츠'라는 단어를 사용하는 것처럼 보이기 때문에 Google에서는 불가능합니다 .

나는 그것에 대해 듣고 이 웹 구성 요소에 대한 예제 사용 케이스 같은 이미지 슬라이더를 구현하는 방법을 설명, CSS-트릭 기사. 내부에 나타나는 코드 예제는 다음과 같습니다.

CSS

#slides ::content img {
   width: 25%;
   float: left;
}

HTML

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>

<content>사용자가 웹 구성 요소를 포함 할 수 있도록하는 이 태그를 참조하는 것 같지만 더 깊이 이해하고 싶습니다.

편집하다:

추가로 읽은 후 앞서 언급 한 기사에서 필자는 ::content의사 요소가 무엇인지 설명하는 구절을 포함하는 저자의 "Shadow DOM CSS Cheatsheet"링크를 발견했습니다 .

요소 내부의 분산 노드를 선택합니다. 기본 선택기를 지원하지 않는 브라우저의 경우 polyfill-next-selector와 쌍을 이루어야합니다.

::content h1 {
    color: red;
}

출처 : http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

이것은 도움이되지만 여전히 전체 사건이 다소 불투명하다고 생각합니다. 추가 통찰력이 있습니까?

---

::content의사 요소는 사용하여 웹 구성 요소 / 그림자 DOM의 미래 구현에 대체되고 ::slotted의사 요소입니다. 마찬가지로이 의사 요소가 대상으로하는 요소는 Shadow DOM 사양 의 최신 버전 에서 <content에서 <slot>로 변경되었습니다 . 여기에서 해당 변경 사항에 대한 관련 토론을 볼 수 있습니다 .

현재 브라우저는 여전히 <content>및 ::content.

---

원래 답변 :

---

요약:

::content는 기본적으로의 하위 항목을 더 깊이 파고 스타일을 지정하는 방법 ShadowHost이며 일반적으로 스타일을 지정할 수 없습니다.. CSS가없는 ShadowDOM 조각을 찾을 수 없기 때문 ::content입니다.

---

이 답변은 적어도 어느 정도 익숙하다고 가정 <template>요소와 웹 구성 요소 , 특히 ShadowDOM 와 거래 ShadowTree의 자신의 두 가지 주요 요소 ShadowHost와 ShadowRoot.

주 -이 글을 쓰는 시점에서 5 개의 주요 브라우저에서 웹 구성 요소에 대한 지원은 50 % 미만입니다 (접두사가 붙은 기본 지원도 지원하지 않음). 모든 최신 브라우저가를 지원하지만 <template>최신 버전의 Chrome 및 Opera 만 ShadowDOM을 완전히 지원합니다. about:config( dom.webcomponents.enabled) 의 필수 기능 을 true로 전환 한 후 Firefox 지원 부분을 사용하십시오 .

를 사용하는 목표는 ShadowDOMMVC의 관심사 분리 와 유사합니다 . 즉, 프레젠테이션에서 콘텐츠를 분리하고 코드에 캡슐화 된 템플릿을 허용하여보다 쉽게 ​​관리 할 수 ​​있도록합니다. 이미 다양한 프로그래밍 언어로되어 있지만 HTML과 CSS에서는 한동안 문제로 남아 있습니다. 또한 웹 앱에서 요소를 스타일링 할 때 클래스 이름과 충돌 할 수 있습니다.

일반적으로 우리는 LightDOM(일종의 "Light Realm") 과 상호 작용 하지만 때로는 캡슐화를 활용하는 것이 도움이 될 수 있습니다. 이러한 종류의 "Shadow Realm"(웹 구성 요소의 일부)에 들어가는 것은 캡슐화 를 허용하여 위에서 언급 한 문제를 방지하는 새로운 방법 입니다. 에서 마크 업에 적용된 모든 스타일 ShadowTree은 ShadowTree똑같은 클래스 또는 선택기가 사용 되더라도 외부의 마크 업에는 적용되지 않습니다 .

언제 ShadowTree합니다 (에 살고있는 ShadowDOM)로부터 나무가 LightDOM그 안에 분산 및 / 또는이 때 ShadowTree렌더링 결과가 소위로 브라우저에 의해 변환 된 구성 트리 .

브라우저가 코드를 렌더링 할 때 콘텐츠가 배포되고 물리적으로 입력 된 위치가 아닌 다른 위치에 삽입됩니다 . 이 분산 출력은 사용자가 보는 것과 브라우저가 보는 것이며 composed tree. 실제로 콘텐츠는 원래 표시되는 순서대로 입력되지 않지만 사용자는이를 알 수 없으며 브라우저도 마찬가지입니다. "최종 결과"와 "원본 코드"를 분리하는 것은 캡슐화의 주요 이점 중 하나입니다.

웹 구성 요소 및 CSS의 미래는 나에게 지적 웹 구성 요소에 큰 40 분 비디오 및 특히 ShadowDOM입니다 ZachSaucier .

---

질문에 따라 ::content의사 요소는 분산 노드 라는 것에 적용됩니다 . 분산 노드는 <content></content>태그 내에 넣는 모든 항목에 대한 또 다른 용어입니다 . 콘텐츠는 원본 마크 업의 위치에서 템플릿에 태그를 배치 한 위치 로 배포 됩니다 <content>.

따라서 CSS에서 특수성이 필요할 때 일반적으로 선택자를 처리 할 수있는 한 가지 방법은 상위 요소로 이동하여 선택기의 일부로 추가하는 것입니다. 예 : 경우 .container {}특정 충분하지, 당신은 사용할 수 있습니다 div .container {}또는 .main .container {}귀하의 선택 작업을하기 위해서이다.

범위 지정 및 캡슐화 인 ShadowDOM의 요점에 대해 생각할 때 여러분이 만든이 새로운 ShadowTree가 완전히 새로운 (이산적인) DOM 조각이라는 것을 깨달아야합니다. 나머지 콘텐츠와 동일한 "Light Realm"이 아닙니다. "Shadow Realm"에 있습니다. 그렇다면 CSS는이 "Shadow Realm"을 대상으로하는 것을 어떻게 알 수 있습니까? ::content의사 요소 를 사용하여 !

::content의사 요소 선택기는 분산 노드의 부모 요소로 작용한다.

HTML5ROCKS 튜토리얼의 큰 순서를 가지고 여기 , 여기 , 그리고 여기에서 자세한 내용을 커버하고 멋진 예제 (더 많은 브라우저가이 기능을 지원까지 크롬이나 오페라와 함께 방문해야합니다) 제공한다.

예를 들어, HTML5Rocks에서 코드의 수정 및 개선 ( Leo에 의해 ) 버전을 참조하십시오 .

var div = document.querySelector('div');
var root = div.createShadowRoot();
var template = document.querySelector('template');

root.appendChild(template.content);

<template>
  <style>
    h3 { color: red; }
    content[select="h3"]::content > h3 { color: green; }
    ::content section p { text-decoration: underline; }
  </style>
  <h3>Shadow DOM</h3>
  <content select="h3"></content>
  <content select="section"></content>
</template>

<div>
  <h3>Light DOM</h3>
  <section>
    <div>I'm not underlined</div>
    <p>I'm underlined in Shadow DOM!</p>
  </section>
</div>

JSFiddle 에서도 사용 가능 (Chrome 또는 Opera와 같은 WebKit 기반 브라우저에서 방문하는 것을 잊지 마십시오 )

여기에서 볼 수 있습니다 의사 요소가되는 첫 번째 의 내용 선택 의 내용입니다, 당신의 마크 업 요소를, 그리고 다음 추가하여 추가로 지정 .::contentsection pShadowRootdivsection p

This may seem unnecessary when compared to normal CSS selector usage (for example, why not just use section p {}?), until you recall that, when traversing a ShadowTree, you cannot normally select descendants of host elements (which distributed nodes are), because they are in the "Shadow Realm" I mentioned earlier.

---

Too bad! Unfortunately ::content is v0, and was deprecated.

You should now use the v1 ::slotted.

Also, <content> was deprecated in favor of <slot>.

Please see: http://hayato.io/2016/shadowdomv1/

Also see: Web Components - why <content> was replaced with <slot>

참고URL : https://stackoverflow.com/questions/27622605/what-is-the-content-slotted-pseudo-element-and-how-does-it-work