ejemplos div content before after css html5 web-component shadow-dom html5-template

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



css content (2)

Esto es imposible para Google porque cada artículo que habla sobre los pseudo-elementos :before y :after parece usar la palabra ''contenido''.

Escuché sobre esto en this artículo de CSS-Tricks, explicando cómo implementar un control deslizante de imagen como un ejemplo de caso de uso para componentes web. El ejemplo de código que aparece adentro es así:

CSS

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

HTML

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

Parece estar refiriéndose a esta etiqueta <content> , que se utiliza para permitir al usuario incluir componentes web, pero me encantaría entender esto más profundamente.

EDITAR:

Después de leer más, en el artículo mencionado, descubrí un enlace a la "Hoja de referencia CSS Shadow DOM" 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 admiten 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 está siendo reemplazado en futuras implementaciones de Web Components / Shadow DOM con el pseudo-elemento ::slotted . Del mismo modo, el elemento objetivo de este pseudo-elemento ha cambiado de <content a <slot > en la última versión de la especificación Shadow DOM . Puede ver una discusión relacionada sobre ese cambio here .

Actualmente, los navegadores aún admiten <content> y ::content .

Respuesta original:

Resumen:

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

Esta respuesta asume que al menos está familiarizado con el elemento <template> y los Componentes web , específicamente el ShadowDOM , que trata con ShadowTree sy sus dos elementos principales, ShadowHost y ShadowRoot .

Nota : Al momento de escribir este artículo, hay menos del 50% de soporte (incluso soporte prefijado, por defecto) para Web Components en los cinco principales navegadores. Si bien todos los navegadores modernos son compatibles con <template> , solo las versiones recientes de Chrome y Opera son totalmente compatibles con ShadowDOM; con Firefox admitiendo partes de él después de alternar la característica requerida en about:config ( dom.webcomponents.enabled ) a true .

El objetivo de usar 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 programación, pero ha sido un problema durante algún tiempo en HTML y CSS. Además, puede haber conflictos con los nombres de clase al diseñar 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 a este tipo de "Reino de las Sombras" (parte de los Componentes Web) es un nuevo método para prevenir los problemas mencionados anteriormente al permitir la encapsulación . Cualquier estilo aplicado al marcado en su ShadowTree no se aplicará al marcado fuera de su 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 dentro de él, y / o cuando se representa el ShadowTree , el navegador convierte el resultado en lo que se llama un árbol compuesto .

Cuando el navegador muestra su código, el contenido se distribuye e inserta en nuevas ubicaciones distintas de donde se escribió físicamente. Esta salida distribuida es lo que ve (y lo que ve el navegador), y se denomina composed tree . En realidad, el contenido no está escrito originalmente en el orden en que aparece ahora, pero usted no lo sabrá y el navegador tampoco. Esta separación entre "resultado final" y "código original", si lo desea, es uno de los principales beneficios de la encapsulación.

Web Components & the Future of CSS es un excelente video de 40 minutos sobre Web Components y específicamente ShadowDOM, que ZachSaucier me ZachSaucier .

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

Entonces, cuando necesita especificidad en CSS, una forma en que puede manejar los selectores normalmente es ir al elemento padre y agregarlo como parte del selector. Por .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 de ShadowDOM, que es el alcance y la encapsulación, debe darse cuenta de que este nuevo ShadowTree que ha creado es un fragmento DOM completamente nuevo (discreto). No está en el mismo "Reino de la Luz" que el resto de su 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 pseudoelementos ::content actúa como el elemento padre de los nodos distribuidos.

HTML5Rocks tiene una gran secuencia de tutoriales here , HERE y here que cubren más información y dan algunos ejemplos excelentes (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);

<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>

También disponible en JSFiddle (Recuerde visitar en un navegador basado en WebKit como Chrome u Opera)

Aquí puede ver que el pseudo elemento ::content section p primero selecciona el contenido de ShadowRoot , que es el contenido del elemento div en su marcado, y luego especifica más al agregar la section p .

Esto puede parecer innecesario en comparación con el uso normal del selector CSS (por ejemplo, ¿por qué no usar la section p {} ?), Hasta que recuerde que, al atravesar un ShadowTree , normalmente no puede seleccionar descendientes de elementos host (que son los nodos distribuidos) , porque están en el "Reino de las Sombras" que mencioné anteriormente.