Co to jest pseudoelement:content/:: slotted i jak to działa?

Pseudoelement jest zastępowany w przyszłych implementacjach Web Components / Shadow DOM pseudoelementem ::slotted. Podobnie element kierowany przez ten pseudoelement zmienił się z <content na <slot> w najnowszej wersji specyfikacji Shadow DOM. Możesz zobaczyć dyskusję na temat tej zmiany tutaj .

Obecnie przeglądarki nadal obsługują <content> i ::content.

Oryginał odpowiedź:

Podsumowanie:

::content jest zasadniczo sposobem na głębsze kopanie i stylowanie Potomków ShadowHost, które normalnie nie są dostępne do stylizacji, ponieważ twój CSS nie wie, aby szukać fragmentu ShadowDOM Bez ::content.

Ta odpowiedź zakłada, że jesteś przynajmniej w pewnym stopniu zaznajomiony z <template> element i Web Components, w szczególności ShadowDOM, która zajmuje się ShadowTrees i ich dwa główne elementy, ShadowHost i ShadowRoot.

Uwaga - W chwili pisania tego tekstu, wsparcie Dla komponentów internetowych w pięciu głównych przeglądarkach jest mniejsze niż 50% (nawet z prefiksem, domyślnie wyłączone). Podczas gdy wszystkie nowoczesne przeglądarki obsługują <template>, tylko najnowsze wersje Chrome i Opera obsługują w pełni ShadowDOM; z Firefoksem obsługującym jego części po włączeniu wymaganej funkcji w about:config (dom.webcomponents.enabled) do true .

Celem użycia ShadowDOM jest podobne do MVC ' S rozdzielenie obaw. Oznacza to, że chcemy oddzielić nasze treści od naszej prezentacji i pozwolić na umieszczenie w kodzie zamkniętych szablonów, aby ułatwić zarządzanie nimi. Mamy to już w różnych językach programowania, ale przez jakiś czas pozostawało to problemem w HTML i CSS. Ponadto mogą występować konflikty z nazwami klas podczas stylizacji elementów w aplikacjach internetowych.

Zwykle wchodzimy w interakcje z LightDOM (rodzajem "Światłości"), ale czasami dobrze byłoby skorzystać z enkapsulacji. Przejście do tego rodzaju "shadow Realm" (część Web Components) jest nową metodą zapobiegania wspomnianym powyżej problemom przez pozwalającą na enkapsulację. Style zastosowane do znaczników w ShadowTree nie będą stosowane do znaczników poza ShadowTree, nawet jeśli używane są te same klasy lub selektory.

Gdy ShadowTree (który mieszka w ShadowDOM) mA drzewo z LightDOM rozłożone w nim, i / lub gdy ShadowTree jest renderowane, wynik jest konwertowany przez przeglądarkę do tzw. Drzewo złożone.

Kiedy przeglądarka renderuje Twój kod, zawartość jest rozprowadzana i wstawiana w nowych miejscach innych niż , gdzie został fizycznie wpisany. To rozproszone wyjście jest tym, co widzisz (i co widzi przeglądarka) i nazywa się composed tree. W rzeczywistości treść nie jest pierwotnie wpisywana w kolejności, w jakiej się teraz pojawia, ale nie będziesz tego wiedział, a także nie będzie przeglądarka. Ta separacja pomiędzy "efektem końcowym" i "kodem oryginalnym", jeśli wolisz, jest jedną z głównych zalet enkapsulacji.

Web Components & przyszłość CSS to świetny 40-minutowy film o komponentach internetowych, a konkretnie o ShadowDOM, wskazanym mi przez ZachSaucier .

Specyficzne dla Twojego pytania, pseudo element ::content odnosi się do tak zwanych rozproszonych węzłów. Rozproszony węzeł jest innym terminem na cokolwiek ty umieść w znacznikach <content></content>. Zawartość jest dystrybuowana z miejsca w oryginalnym znaczniku do miejsca, w którym umieściłeś swoje znaczniki <content> w szablonie.

Tak więc, gdy potrzebujesz specyfiki w CSS, jednym ze sposobów, w jaki możesz normalnie obsługiwać selektory, jest przejście do elementu nadrzędnego i dodanie go jako części selektora. Na przykład: jeśli .container {} nie jest wystarczająco szczegółowy, możesz użyć div .container {} lub .main .container {}, aby twój selektor działał.

Thinking about the point of the ShadowDOM, co jest zakresem i enkapsulacją, musisz zdać sobie sprawę, że ten nowy obiekt cieni, który stworzyłeś, jest zupełnie nowym (dyskretnym) fragmentem DOM. To nie jest w tym samym "Królestwie Światła", co reszta treści; to jest w "Królestwie cieni". Więc skąd CSS wie, aby celować w "Królestwo cieni"? Używając pseudo-elementu ::content!

Selektor pseudoelementu ::content działa jako element nadrzędny rozproszonych węzłów.

HTML5Rocks ma świetną sekwencję samouczków tutaj, tutaj i tutaj które zawierają więcej informacji i dają kilka świetnych przykładów(koniecznie odwiedź Chrome lub operę, dopóki więcej przeglądarek nie obsługuje tych funkcji).

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>

Dostępne również na JSFiddle (pamiętaj, aby odwiedzić w przeglądarce opartej na WebKit, takiej jak Chrome lub Opera)

Tutaj widać, że ::contentsection p pseudo element jest najpierw wybierając zawartość ShadowRoot, która jest zawartością div elementu w Twoim znaczniku, a następnie określając dalej przez dodanie section p.

Może to wydawać się niepotrzebne w porównaniu do normalnego użycia selektora CSS (na przykład, dlaczego nie użyć section p {}?), dopóki nie przypomnisz sobie, że podczas przechodzenia ShadowTree, nie możesz normalnie wybrać Potomków host elementów (którymi są rozproszone węzły), ponieważ znajdują się w "Królestwie cieni", o którym wspomniałem wcześniej.