::contentПсевдо-елемент замінюється в майбутніх реалізаціях веб - компоненти / Shadow DOM з ::slottedпсевдо-елемента. Аналогічно, елемент, на який націлений цей псевдоелемент, змінився з > <contentна <slot> в останній версії специфікації Shadow DOM . Ви можете побачити відповідне обговорення цієї зміни тут .
В даний час браузери все ще підтримують <content>і ::content.
Оригінальна відповідь:
Короткий зміст:
::contentце, по суті, спосіб копати глибше і стилізувати нащадків ShadowHost, які зазвичай недоступні для стилізації, оскільки ваш CSS не знає, шукати фрагмент ShadowDOM без ::content.
Ця відповідь передбачає, що ви хоча б дещо знайомі з <template>елементом та веб-компонентами , зокрема з ShadowDOM , який має справу з ShadowTrees та їх двома основними елементами, ShadowHostта ShadowRoot.
Примітка. На момент написання статті веб-компоненти підтримують менше 50% підтримки (навіть із префіксом, підтримка за замовчуванням) у п’яти основних браузерах. Хоча всі сучасні браузери підтримують <template>, лише останні версії Chrome та Opera повністю підтримують ShadowDOM; з Firefox, що підтримує його частини, після того, як ви перемкнете необхідну функцію в about:config( dom.webcomponents.enabled) на true .
Мета використання ShadowDOMаналогічна поділу концерну MVC . Тобто ми хочемо відокремити наш вміст від нашої презентації та дозволити вкладені шаблони в наш код, щоб допомогти зробити його більш керованим. У нас це вже є на різних мовах програмування, але це деякий час залишається проблемою в HTML та CSS. Крім того, можуть виникати конфлікти з іменами класів при стилюванні елементів у веб-програмах.
Зазвичай ми взаємодіємо з LightDOM(своєрідною «Світлою Царством»), але іноді було б корисно скористатися перевагами інкапсуляції. Перехід до такого роду "Тіньової сфери" (частина веб-компонентів) - це новий метод запобігання згаданим вище проблемам, дозволяючи інкапсуляцію . Будь-які стилі, застосовані до розмітки у вас 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. Він не в тому самому «Світлому царстві», як решта вашого вмісту; це в "Тіньовому царстві". Отже, як CSS знає, щоб націлити цю "Тіньову сферу"? Використовуючи ::contentпсевдоелемент!
HTML5Rocks має чудову послідовність підручників тут , тут і тут, які охоплюють більше інформації та дають кілька чудових прикладів (обов’язково відвідуйте Chrome або Opera, поки більше браузерів не підтримають ці функції).
Наприклад, див. Цю змінену та вдосконалену (за Лео ) версію коду з HTML5Rocks:
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 (не забудьте відвідати у браузері на базі WebKit, як-от Chrome або Opera)
Тут ви можете бачити, що псевдоелемент спочатку вибирає вміст , який є вмістом елемента у вашій розмітці, а потім уточнює, додаючи .::contentsection pShadowRootdivsection p
Це може здатися непотрібним у порівнянні із звичайним використанням селектора CSS (наприклад, чому б просто не використовувати section p {}?), Поки ви не пам'ятаєте, що при обведенні a ShadowTreeви не можете нормально вибирати нащадків hostелементів (якими є розподілені вузли), оскільки вони знаходяться в "Тіньове царство", про яке я згадував раніше.