Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

138
Vistas
Estilos globales de solo descendientes en Svelte

¿Hay alguna forma en Svelte de agregar estilos que solo afecten el componente actual y cualquier componente descendiente?

Svelte admite un envoltorio de selector nativo :global() que declarará estilos para ese selector en el ámbito global, pero estoy buscando algo similar que solo coincida con los selectores en los componentes actuales o descendientes.

Por ejemplo ( REPL ):


App.esbelta

 <script> import C1 from './C1.svelte'; let name = 'world'; </script> <div><C1>Hello {name}!</C1></div>

C1.esbelto

 <script> import C2 from './C2.svelte'; let name = 'world'; </script> <style> :global(div) { padding: 10px; background-color: blue; } div { background-color: red; } </style> <div><C2><slot /></C2></div>

C2.esbelto

 <div><slot /></div>

En el ejemplo anterior, los tres componentes reciben el estilo global del componente hijo del medio, C1.svelte . Estoy buscando una manera de hacer una especie de estilo híbrido (sin pasar estilos a componentes secundarios) para agregar estilos "globales hacia abajo" que solo afectan los componentes hacia abajo en el árbol de componentes.

Cuando no se usa el envoltorio del selector :global() , a los nodos coincidentes se les asigna una clase única a la que luego apunta el selector, que se agrega al selector durante la compilación. Lo que estoy preguntando / sugiriendo sería algo como esto:

 :find(div) { background-color: blue; }

…donde :find() asigna de manera similar una clase única a cualquier elemento HTML que coincida en los mismos componentes o en componentes descendentes. es posible?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede abarcar estilos solo para componentes secundarios combinando :global() con un selector de ámbito. Por ejemplo, el siguiente selector se aplicará a todos los divs de cualquier componente que sean descendientes de un div de este componente.

 <style> div :global(div) { padding: 10px; background-color: blue; } </style>

El selector se transforma en algo como esto:

 div.svelte-hash div { /* etc */ }

Si también desea apuntar a divs de nivel superior en este componente, puede escribir la regla de esta manera (aunque esto puede tener implicaciones específicas de CSS):

 <style> div, div :global(div) { padding: 10px; background-color: blue; } </style>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda