No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
0H
3M
29S

Atributos

12/22
Recursos

Aportes 18

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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=鈥渕odule鈥 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>

,