¿Qué es el pseudo-elemento :: content / :: slotted y cómo funciona?

Esto es imposible de buscar en Google porque cada artículo que habla sobre los pseudo-elementos :before y :after parece usar la palabra ‘contenido’.

Escuché sobre esto en este artículo de CSS-Tricks, donde explicaba cómo implementar un deslizador de imagen como ejemplo de uso para componentes web. El ejemplo de código que aparece en el interior es así:

CSS

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

HTML

  ... 

Parece que se está refiriendo a esta etiqueta , que se usa para permitir al usuario incluir componentes web, pero me gustaría entender esto más profundamente.

EDITAR:

Después de seguir leyendo, en el artículo mencionado anteriormente, descubrí un enlace del “Shadow DOM CSS Cheatsheet” del autor, que incluye un pasaje que explica qué es el pseudo-elemento ::content :

Selecciona nodos distribuidos dentro de un elemento. Debe combinarse con polyfill-next-selector para navegadores que no son compatibles con el selector nativo.

 ::content h1 { color: red; } 

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

Esto es útil, pero todavía encuentro todo el asunto bastante opaco. ¿Alguna idea adicional?

El pseudo-elemento ::content se está reemplazando en futuras implementaciones de Web Components / Shadow DOM con ::slotted . Del mismo modo, el elemento al que apunta este pseudo-elemento ha cambiado de to > en la última versión de la especificación Shadow DOM . Puede ver la discusión relacionada sobre ese cambio aquí .

Actualmente, los navegadores aún son compatibles con y ::content .


Respuesta original:


Resumen:

::content es esencialmente una forma de profundizar en el estilo y el estilo de los descendientes de ShadowHost , que normalmente no están disponibles para ser diseñados, porque su CSS no sabe buscar el fragmento de ShadowDOM sin ::content .


Esta respuesta supone que al menos está un poco familiarizado con el elemento y los componentes web , específicamente con el ShadowDOM , que trata con los ShadowTree y sus dos elementos principales, ShadowHost y ShadowRoot .

Nota : A partir de este momento, hay menos del 50% de soporte (incluso soporte prefijado, fuera de lo predeterminado) para los componentes web en los cinco principales navegadores. Si bien todos los navegadores modernos son compatibles con , solo las versiones recientes de Chrome y Opera admiten el ShadowDOM por completo; con Firefox dom.webcomponents.enabled soporte a partes de él después de alternar la función requerida en about:config ( dom.webcomponents.enabled ) en true .

El objective de usar el ShadowDOM es similar a la separación de preocupaciones de MVC. Es decir, queremos separar nuestro contenido de nuestra presentación y permitir plantillas encapsuladas en nuestro código para ayudar a que sea más manejable. Ya tenemos esto en varios lenguajes de progtwigción, pero sigue siendo un problema durante algún tiempo en HTML y CSS. Además, puede haber conflictos con los nombres de clase cuando se diseñan elementos en aplicaciones web.

Normalmente, interactuamos con LightDOM (una especie de "Reino de luz"), pero a veces sería útil aprovechar la encapsulación. Cruzar este tipo de "Shadow Realm" (parte de Web Components) es un nuevo método para evitar los problemas mencionados anteriormente al permitir la encapsulación . Cualquier estilo aplicado al marcado en su ShadowTree no se aplicará al marcado fuera de ShadowTree , incluso si se usan exactamente las mismas clases o selectores.

Cuando el ShadowTree (que vive en el ShadowDOM ) tiene un árbol del LightDOM distribuido en él, y / o cuando se renderiza ShadowTree , el navegador convierte el resultado en lo que se denomina un árbol compuesto .

Cuando el navegador representa su código, el contenido se distribuye e inserta en nuevas ubicaciones que no sean las que se escribieron físicamente. Este resultado distribuido es lo que ves (y lo que ve el navegador) y se llama composed tree . En realidad, el contenido no se tipeó originalmente en el orden en que ahora aparece, pero no lo sabrá, y tampoco el navegador. Esta separación entre "resultado final" y "código original", si se quiere, es uno de los principales beneficios de la encapsulación.

Web Components & the Future of CSS es un gran video de 40 minutos sobre Web Components y específicamente el ShadowDOM, me lo señaló ZachSaucier .


Específico para su pregunta, el pseudo elemento ::content aplica a lo que se denomina nodos distribuidos . Un nodo distribuido es otro término para lo que coloque dentro de las tags . El contenido se distribuye desde su lugar en el marcado original hasta donde haya colocado sus tags en la plantilla.

Por lo tanto, cuando necesita especificidad en CSS, una manera en que puede manejar los selectores normalmente es que vaya al elemento padre y lo agregue como parte del selector. .container {} : si .container {} no es lo suficientemente específico, puede usar div .container {} o .main .container {} para que su selector funcione.

Pensando en el punto del ShadowDOM, que es el scope y la encapsulación, debes darte cuenta de que este nuevo ShadowTree que has creado es un fragmento de DOM completamente nuevo (discreto). No está en el mismo "Reino luminoso" que el rest de tu contenido; está en un "Reino de las Sombras". Entonces, ¿cómo sabe el CSS para apuntar a este "Reino de las Sombras"? ¡Usando el pseudo-elemento ::content !

El selector de pseudo-elemento ::content actúa como el elemento padre de los nodos distribuidos.

HTML5Rocks tiene una gran secuencia de tutoriales aquí , aquí y aquí, que cubren más información y brindan buenos ejemplos (asegúrese de visitar Chrome u Opera hasta que más navegadores admitan estas características).

Por ejemplo, vea esta versión modificada y mejorada (por Leo ) del código de HTML5Rocks:

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

Light DOM

I'm not underlined

I'm underlined in Shadow DOM!

¡Demasiado! Desafortunadamente ::content es v0 , y fue desaprobado.

Ahora debería usar v1 ::slotted .

Además, quedó en desuso en favor de .

Por favor mira: http://hayato.io/2016/shadowdomv1/

Consulte también: Componentes web: por qué fue reemplazado por