selectores - selector de hijos css

¿Qué significan/deep/y:: shadow en un selector CSS?

Question

Al mirar Polymer, veo el siguiente selector de CSS en la pestaña Estilos de las herramientas de desarrollador de Chrome 37:

También he visto un selector con pseudo selector ::shadow .

Entonces, ¿qué significan /deep/ y ::shadow en un selector CSS?

Answer 1

Como Joel H. señala en los comentarios, Chrome ha desaprobado el /deep/ combinator, y da un error de sintaxis en IE.

Los componentes web HTML5 ofrecen una encapsulación completa de estilos CSS.

Esto significa que:

• los estilos definidos dentro de un componente no pueden filtrarse y afectar el resto de la página
• Los estilos definidos a nivel de página no modifican los estilos propios del componente.

Sin embargo, a veces desea tener reglas de nivel de página para manipular la presentación de elementos componentes definidos dentro de su DOM sombra. Para hacer esto, agregue /deep/ al selector CSS.

Entonces, en el ejemplo que se muestra, html /deep/ [self-end] está seleccionando todos los elementos debajo del elemento html (nivel superior) que tienen el atributo self-end , incluidos los enterrados dentro de las raíces DOM de sombra de los componentes web.

Si necesita que un elemento seleccionado viva dentro de una raíz de sombra, puede usar el pseudo selector ::shadow en su elemento padre.

Considerar:

<div>
<span>Outer</span>
#shadow-root
<my-component>
<span>Inner</span>
</my-component>
</div>

El selector html /deep/ span seleccionará ambos elementos <span> .

El selector ::shadow span seleccionará solo el elemento <span> interno.

Lea más sobre esto en la especificación del Módulo de alcance CSS del W3C.