Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

141
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda