LogoLogo
GithubTwitterDiscordPlayground
Español
Español
  • 👋Atomico
  • 🚀Comenzando con Webcomponents
  • Api
    • 🧬Props(Propiedades)
    • 🧩Virtual DOM
    • 🎣Hooks
    • 🔬Testing
  • guías
    • ✨Sistemas de diseño con Atomico
      • Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño.
        • Monorepositorio versionado a nivel de componente
        • Monorepositorio versionado a nivel de sistema de diseño
      • Storybook
        • @atomico/storybook
      • Tokens (CSS custom properties)
      • Slots
    • 📖Atomico + Storybook
    • 🛡️Atomico + Typescript
    • ⚛️Atomico + React
    • 💧Atomico + SSR/SSG
    • 🧠Patrones de diseño
    • 🗺️Guía de estilo (Estructuras)
    • 🔀Slot
  • @atomico
    • @atomico/vite
    • @atomico/hooks
    • @atomico/components
    • @atomico/exports
    • @atomico/react
    • @atomico/router
    • @atomico/store
    • @atomico/storybook
  • Soporte
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page
  • ::slotted(<selector>)
  • Auto slot
  • Slot condicional.

Was this helpful?

Edit on GitHub
Export as PDF
  1. guías
  2. Sistemas de diseño con Atomico

Slots

PreviousTokens (CSS custom properties)

Last updated 3 years ago

Was this helpful?

El uso de slots mejora la composición permitiéndote reflejar el contenido expuesto en el lightDOM del componente en el shadowDOM de este, ejemplo:

::slotted(<selector>)

El selector slotted permite la manipulación del contenido expuesto como slot del lightDOM desde el shadowDOM, ejemplo:

Auto slot

Con Atomico puedes definir un slot por defecto para tus componentes, esto es útil si buscas mantener cierta consistencia de composición sin la necesidad de declarar el uso de slot, ejemplo:

<my-component>
    <my-component-header></my-component-header>
    <my-component-footer></my-component-footer>
</my-component>

Para definir un slot por defecto solo debes declarar en las props la prop slot, ejemplo:

myComponentHeader.props = {
    slot: { type:String, value: "header"}
}

myComponentFooter.props = {
    slot: { type:String, value: "footer"}
}

Considere esto practico solo si la composición esta apalancada al contenedor, esto no evita que ud modifique la propiedad slot desde la instancia del componente

Slot condicional.

import { useRef } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";

function component(){
    const ref = useRef();
    const childNodes = useSlot(ref);
    return <host shadowDom>
        <header style={{
            display: childNodes.length? "block": "none"
        }}>
            <slot name="header" ref={ref}/>
        </header>
    </host>
}

Atomico ofrece un hook dentro del package ** **que anexa el evento a una referencia, este le permitirá ocultar slots si estos no declaran contenido, ejemplo:

✨
@atomico/hooks/use-slot
slotchange