Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

144
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!