Bem-vindo ao Polymer 3 #02: Adicionando filhos com <slot>
Fala galera, beleza? No primeiro post dessa série nós vimos como criar um web component de Hello World onde ao utilizarmos a nossa tag <hello-world> já era renderizado um h1 com a nossa saudação.
Tudo muito lindo, muito maravilho, mas vocês devem ter se perguntado "Okay, e se eu não quiser que meu elemento renderize algo pré-definido? E se eu quiser definir o conteúdo que vai dentro do meu componente de acordo com o lugar onde vou utilizá-lo? E se eu quisesse utilizar um componente dentro do outro?". É por isso que o segundo artigo dessa série vai abordar exatamente esses pontos. Lhes apresento a tag <slot>!
O <slot> é um espaço reservado dentro de um web component onde você pode preencher com sua própria marcação HTML.
# Criando nosso elemento com <slot>
Acima temos um arquivo chamado "slot.js", nele estamos criando o nosso web component <my-element>. Perceba que nosso componente é composto apenas de um <button> e que dentro desse button declaramos o <slot>.
# Utilizando nosso elemento
Com o nosso elemento criado, podemos usá-lo na nossa página conforme o exemplo acima. Onde estamos inserindo um <span> dentro do nosso componente com o texto "Entendi".
Agora, ao renderizar a nossa página HTML, teremos o seguinte resultado:
Legal, neh?! Mas dessa forma só podemos utilizar um <slot> dentro de cada componente… A não ser que eles sejam slots nomeados!
# Slot nomeado
Um slot nomeado serve para quando queremos mais de um slot dentro de um mesmo componente. Como no exemplo abaixo:
Aqui temos um slot chamado "header", que coloquei dentro de uma tag <h1>, e um slot chamado "paragraph", que coloquei dentro de uma tag <p>.
Na nossa página HTML conseguimos dizer qual <span> pertence a qual slot. Dessa forma podemos ter vários slots no nosso componente.
Você consegue atribuir várias tags HTML ao mesmo slot. Por exemplo: se eu quiser colocar outro <span> na minha página e dizer que ele pertence ao slot "paragraph" eu posso.
Agora a nossa página renderizada está assim:
# Fallback
Sabendo o que é um slot nomeado você deve saber também que você pode ter um slot nomeado que contém um fallback, ou seja, um valor default. Isso pode ser muito útil quando você precisa, por exemplo, que algo seja renderizado no seu web component independente se algum elemento foi atrelado aquele slot ou não. Calma, não fica desesperado rs olha só o componente que tenho aqui:
Nesse componente eu tenho um slot "normal" (utilizei o mesmo slot do primeiro exemplo para ficar mais simples xD) e um slot nomeado (o meu "header"). Coloquei a frase "Aqui é o titulo" como valor default do meu slot nomeado.
Com meu componente criado dessa forma eu posso ter uma página HTML assim:
Ao renderizar minha página eu vou encontrar o seguinte resultado:
Perceberam que mesmo eu não declarando o slot nomeado ele apareceu ali onde deveria? Isso por causa do fallback que atribuí a ele lá no meu componente.
Se eu passasse na minha página HTML um conteúdo para o slot "header" esse conteúdo substituiria o meu valor de fallback :)
Só é possível passar um valor de fallback para slots nomeados, lembre sempre disso xD
# Conclusão
No artigo de hoje pudemos ver como inserir marcações HTML dentro do nosso web component seja com um simples slot, com um slot nomeado ou com um fallback de slot nomeado. Agora podemos brincar um pouco mais com nossos componentes e fiquem ligados que no próximo artigo falarei sobre como criar propriedades para seus componentes nativos!
Ah… não se esqueçam de me seguir nas minhas redes sociais para continuar por dentro dos conteúdos que estou preparando para vocês xD
