Mantén la atención ya que en este escrito vas a encontrar la respuesta que buscas.
Solución:
los ::content el pseudo-elemento está siendo reemplazado en futuras implementaciones de Web Components / Shadow DOM con el ::slotted pseudo-elemento. Asimismo, el elemento objetivo de este pseudoelemento ha cambiado de
Actualmente, los navegadores aún admiten ::content.
Respuesta original:
Resumen:
::content es esencialmente una forma de profundizar y dar estilo a los descendientes del ShadowHostque normalmente no están disponibles para diseñar, porque su CSS no sabe buscar el fragmento ShadowDOM sin ::content.
Esta respuesta asume que está al menos algo familiarizado con el elemento y Componentes webespecíficamente el ShadowDOMque trata de ShadowTrees y sus dos elementos principales, ShadowHost y ShadowRoot.
Nota - En el momento de escribir este artículo, hay menos del 50 % de soporte (incluso soporte prefijado, desactivado de forma predeterminada) para componentes web en los cinco navegadores principales. Si bien todos los navegadores modernos admiten , 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) para true.
El objetivo de usar el ShadowDOM es similar a MVC separación de intereses. 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 sigue siendo un problema durante algún tiempo en HTML y CSS. Además, puede haber conflictos con los nombres de las clases al diseñar elementos en las aplicaciones web.
Normalmente, interactuamos con el LightDOM (una especie de "Reino de la 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 evitar los problemas mencionados anteriormente al permitiendo la encapsulación. Cualquier estilo aplicado al marcado en su ShadowTree no se aplicará al marcado fuera de su ShadowTreeincluso si se utilizan exactamente las mismas clases o selectores.
Cuando el ShadowTree (que vive en el ShadowDOM) tiene un árbol del LightDOM distribuidos dentro de él, y/o cuando el ShadowTree se procesa, el navegador convierte el resultado en lo que se llama un árbol compuesto.
Cuando el navegador procesa su código, el contenido se distribuye e inserta en nuevas ubicaciones otro que 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 se escribió originalmente en el orden en que aparece ahora, pero usted no sabrá esto y tampoco lo sabrá el navegador. Esta separación entre "resultado final" y "código original", por así decirlo, es uno de los principales beneficios de la encapsulación.
Componentes web y el futuro de CSS es un excelente video de 40 minutos sobre componentes web y, específicamente, ShadowDOM, que me indicó ZachSaucier.
Específico a su pregunta, el ::content pseudo elemento se aplica a lo que se llama nodos distribuidos. Un nodo distribuido es otro término para cualquier cosa que pongas dentro del
Entonces, cuando necesita especificidad en CSS, una forma en que puede manejar los selectores normalmente es ir al elemento principal y agregarlo como parte del selector. Ej: si .container no es lo suficientemente específico, puede usar div .container o .main .container para que tu 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 que debe apuntar a este "Reino de las Sombras"? Al usar el ::content pseudo-elemento!
los ::content El selector de pseudoelementos actúa como el elemento principal de los nodos distribuidos.
HTML5Rocks tiene una gran secuencia de tutoriales aquí, aquí y aquí que cubren más información y brindan algunos ejemplos excelentes (asegúrese de visitar Chrome u Opera hasta que más navegadores admitan estas funciones).
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);
Shadow DOM
Light DOM
I'm not underlined
I'm underlined in Shadow DOM!
También disponible en JSFiddle (Recuerde visitar en un navegador basado en WebKit como Chrome u Opera)
Aquí puedes ver que el ::contentsection p pseudo elemento es primero seleccionando el contenido de la ShadowRootque es el contenido de la div elemento en su marcado, y luego especificando más añadiendo section p.
Esto puede parecer innecesario en comparación con el uso normal del selector de CSS (por ejemplo, ¿por qué no usar simplemente section p ?), hasta que recuerdes que, al atravesar un ShadowTreenormalmente no puede seleccionar descendientes de host elementos (que son los nodos distribuidos), porque están en el "Reino de las Sombras" que mencioné anteriormente.
¡Demasiado! Desafortunadamente ::content es v0y quedó en desuso.
Ahora debe usar el v1::slotted.
También,
Consulte: http://hayato.io/2016/shadowdomv1/
Ver también: Componentes Web - por qué
valoraciones y reseñas
Tienes la opción de añadir valor a nuestro contenido colaborando tu experiencia en las anotaciones.