No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Atributos

12/22
Recursos

Aportes 18

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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);

Creo que es mucho mejor usar atributos en lugar de slots, es mas limpia y mejor estructurada

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 😃

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;
  }
Hola, como me recomiendan debuggear, como debbuguean ustedes?, yo suelo preguntarle a una ia en donde esta el error. pero puede llegar a ser algo frustrante y creo que deberia tener otras herramientas para hacerlo, puesto que en la mayoria de casos de este curso no me da ningun error en la consola del navegador, simplemente lo que estoy esperando que se renderice en la pantalla no aparece por ningun lado.
Entonces esto es una forma alternativa de llenar el contenido de la plantilla, diferente a el tag slot, me gusta porque pone de manifiesto el como pasar atributos que con slot no es muy claro y que son primordiales como la direccion de imagenes, el alt text o aria labels.

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>

,