Introducción a los Web Components
Introducción a los Web Components
¿Qué problemas resuelven los Web Components?
¿Qué son los Web Components?
APIs de Web Components
Beneficios de Web Components
Ciclo de vida de los Web Components
Ciclo de vida de un componente
Web Components
Custom Elements
Template
Shadow DOM
Manejo de datos
Content Slot
Multi Content Slot
Atributos
attributeChangedCallback
disconnectedCallback
Estilos en Componentes
:host
::slotted
CSS custom properties
Proyecto
Presentación del proyecto
Estructura base de nuestro componente
Atributos en nuestro componente
Web Components de terceros
Utilizando componentes de terceros
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes: $249
$219/año
Paga en 4 cuotas sin intereses
Termina en:
0D
0H
3M
29S
Atributos
12/22Recursos
Aportes 18
Preguntas 6
Ordenar por:
img="https://avatars3.githubusercontent.com/u/1905708?s=280&v=4/"
Aquí les dejo el logo de los web components junto con el código de esta clase:
.
Adicion de atributos
.
Entre Slot y Atributos, prefiero usar los Atributos. Es muy similar a una etiqueta estándar HTML5.
Estoy fascinado con este curso.
MY NOTES FOR ATTRIBUTES 😄
En esta clase veremos formas de manejar datos dinámicos por fuera de nuestro componente.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Hola mundo again</h2>
<!-- Establecemos los atributos que vamos a obtener del componente-->
<my-element title="soy un titulo" parrafo="soy el texto del parrafo" img="https://web-components-resources.appspot.com/static/logo.svg"></my-element>
<script type="module" src="./my-elements.js"></script>
</body>
</html>
js
class myElement extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:"open"});
//inicializamos unas variable para generar el match y obtener
//El atributo de la etiqueta
this.title = this.getAttribute('title');
this.parrafo = this.getAttribute('parrafo');
this.img = this.getAttribute('img');
}
getTemplate(){
const template = document.createElement('template');
//Quitamos los slots para probar los otros metodos de datos dinamicos
//Utilizamos las variables que inicializamos para obtener los atributos
//De las etiquetas dentro del template
template.innerHTML = `
<section>
<h2>${this.title}</h2>
<div>
<p>${this.parrafo}</p>
<img src="${this.img}">
</div>
</section>
${this.getStyles()}
`;
return template
}
getStyles(){
return`
<style>
h2{
color:red;
}
</style>
`
}
render(){
this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true))
}
connectedCallback(){
this.render();
}
}
customElements.define('my-element', myElement);
Los Web Components son lo mejor!!! lml
Hola:
Hice un pequeño cambio en el nombre del atributo de imagen, para probar que el nombre del atributo en el index.html no necesariamente debe ser el mismo nombre que el utilizado dentro del my-element.js, lo importante es que este mapeado.
Pero seguro que las buenas prácticas indican que deben llamarse igual.
Saludos 😃
Creo que es mucho mejor usar atributos en lugar de slots, es mas limpia y mejor estructurada
Alguieb que me pueda explicar por qué solo sirve el atributo img con la imagen del directorio web del profesor y no me sirve con ningún otro directorio ni siquiera metiendo imágenes desde mis documentos locales???
Me estan encantando los web components
Apuntes y código:
<h4>Atributos</h4>Crearemos nuestros propios atributos en JS para colocarlos en la etiqueta HTML. Así mandamos información de manera sencilla.
<my-element title="Soy un título :D" parrafo="Soy el texto del párrafo" img="https://avatars3.githubusercontent.com/u/1905708?s=280&v=4">
</my-element>
class myElement extends HTMLElement {
constructor(){
super(); //* Obtenemos acceso a todos los elementos y métodos de la clase que extendemos (heredamos)
this.attachShadow({mode: 'open'}); //*Casi siempre todos los componentes tiene que venir en modo abierto.
this.title = this.getAttribute('title'); //*Estos son los atributos que incluiremos en la etiqueta HTML
this.parrafo = this.getAttribute('parrafo');
this.img = this.getAttribute('img');
}
getTemplate(){ //*Esto será puro HTML
const template = document.createElement('template');
template.innerHTML = `
<section>
<h2>${this.title}</h2>
<div>
<p>${this.parrafo}</p>
<img src="${this.img}}"/>
</div>
</section>
${this.getStyles()} <!---Aplicamos los estilos--->
`;
return template;
}
Para los que actualmente estan haciendo esta actividad y solo les sale el titulo h2 en el navegador eliminen type=“module” en el index.html
Atributos
Hay más maneras de manejar los datos dinámicos, una de estas es el uso de los atributos, podemos utilizar ciertos atributos de las etiquetas para obtener su valor y se pueda renderizar nuestro componente
.
Veamos como hacerlo!!!
class MyElement extends HTMLElement {
constructor ( ) {
...
// con getAttribute() podemos obtener un atributo de una etiqueta
**this.title = this.getAttribute('title');
this.pharagraft = this.getAttribute('pharagraft');
this.img = this.getAttribute('img')**
}
getTemplate() {
const template = document.createElement('template');
template.innerHTML = `
<section>
<h2>
**${this.title}**
</h2>
<div>
<p>**${this.pharagraft}**</p>
<img src="**${this.img}**" />
</div>
</section>
${this.getStyles()}
`
return template;
}
...
}
Luego en HTML simplemente podemos colocar ese atributo en nuestra etiqueta personalizada:
<my-element
**title="Soy un título"**
**pharagraft="soy un párrrafo"
img="https://avatars3.githubusercontent.com/u/1905708?s=280&v=4/"**
>
</my-element>
Esto ya nos renderizará un resultado en nuestro navegador 😄. Así de fácil es de trabajar con los atributos en nuestros web components.
Los parches de audio a lo largo del video me dejaron sordo 😂
Incluso con el código del profesor me sale este error
HTML:
<my-element
title="this is a title"
pharagraph="this is a pharagraph"
img="https://avatars3.githubusercontent.com/u/1905708?s=280&v=4/"
></my-element>
En Contructor:
this.title = this.getAttribute('title')
this.pharagraph = this.getAttribute('pharagraph')
this.img = this.getAttribute('img')
En Template:
<section>
<h1>${this.title}</h1>
<h2>${this.pharagraph}</h2>
<img src=${this.img}/>
</section>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.