No tienes acceso a esta clase

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

Custom Elements

7/22
Recursos

Aportes 23

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Solo para refrescar:
.

  • document.createElement: Crea una nueva etiqueta en memoria
  • element.setAttribute: Establece un atributo a alguna etiqueta
  • element.getAttribute: Obtiene el atributo de una etiqueta
  • element.textContent: Establece el contenido en texto de una etiqueta
  • element.innerHTML: Establece el contenido HTML de una etiqueta
  • element.appendChild: Inserta esa etiqueta que estaba en memoria al DOM real

.
También recordemos que no es buna práctica usar innerHTML 👀

Dejo un componente que hice para practicar que consiste en una tarjeta básica =D

const template = `
    <div class="card">
        <h2 class="title">New Card</h2>
        <p class="description">This is an example of a card description made for the Web Component Course from Platzi</p>
        <small class="author">made by @nazarenoalt</small>
    </div>

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;1,700&display=swap');
    * {
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
    }
    .card {
        width: 200px;
        margin: 20px;
        padding: 20px;
        border-radius: 7px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }
    .title {
        margin: 10px 0;
    }
    .description {
        margin-bottom: 10px;
        color: rgb(134, 134, 134);
    }
    </style>
`

class cardElement extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        document.body.innerHTML = template;
    }
}

customElements.define('card-element', cardElement);

MUY recomendable tomar el curso de manipulacion del DOM. Por favor no seguir si no lo tomaste.

Excelente curso, llevaba rato buscando este contenido.

Tremendo, en mi caso que no me quiero atar a ninguna tecnología, es perfecto! ♥

Hola:

Tengo una duda.

Porque si en el minuto 13:38, aparecen 3 etiquetas de Hola mundo!!, en el minuto 13:42, no aparecen 3 veces:
hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!

hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!

hola Mundo!!
Hola mundo 2!
texto ejemplo para la case!

Saludos 😃

pd. Puse este item aquí ya que en preguntas no me dejo poner mucho texto.

por ahí me encontré con esto espero les ayude

Me encanto esta clase. Me siento como un nene con su nuevo jueguete

Les comparto el codigo de la creacion de su propio web component! 😄

La creación de mi primer Web Component me gustó mucho. Esta clase ha sido increíble.

Dejo el código con comentarios y Este tutorial para insertar Web Components a cualquier app:

<!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>Custom Elements</title>
</head>
<body>
  <my-element></my-element> <!!---Esto viene de JS en customElements.define()-->
  <script type="module" src="my-element.js"></script>
</body>
</html>
const template = document.createElement('div');
template.innerHTML = `
<style>
  .texto{
    color: red;
  }
  p{
    color: blue;
  }
</style>
  <p class="texto">Hola mundo 2 ;)</p>
  <p>Texto ejemplo para la clase</p>
`;

class myElement extends HTMLElement {
  constructor(){
    super(); //* Obtenemos acceso a todos los elementos y métodos de la clase que extendemos (heredamos)

    //*Aquí solo estamos creando la etiqueta p, pero aún no la veremos en el DOM
    this.p = document.createElement('p'); //*Está lista y cargada en memoria
  }

  //*Esto es lo que agregará cosas al DOM
  connectedCallback(){
    this.p.textContent = "Hola mundo con vanilla JS";
    this.append(this.p); //* Aquí lo agregamos :D
    this.append(template); //*Agregamos al DOM el template que creamos al inicio y tendrá los estilos que definimos
  }
}

customElements.define('my-element' , myElement); //* Definimos que la clase se va a convertir en una etiqueta

MY NOTES FOR CUSTOM ELEMENTS

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>
 
  <my-element></my-element>
  <script type="module" src="./my-elements.js"></script>
  
</body>
</html>

.
JS

//Otra forma de crear etiquetas html
const template =  document.createElement('div');
template.innerHTML = `
<style>
  p{

    color:blue;
  }

  .texto{
    color:red;
  }

</style>
<p class="texto">Hola mundo 2!! <p>
<p>texto ejemplo para la clase</p>
`;


//Inicalizamos nuestra clase y heredamos las propiedades de HTMLElement

class myElement extends HTMLElement{
  //En el constructor estamos inicializando todo lo que se va a guardar en memoria 
    //Para que despues podamos agregarlos como nodos al dom
  constructor(){
    //Como estamos heredando de una clase utilizamos el super para heredar
      //El constructor de esa clase de la que heredamos
    super();

    this.p = document.createElement('p');

    
  }

  //Para poder utilizar mi etiqueta p utilizamos connectedCallback
    //Tiene que escribir asi tal cual
  connectedCallback(){
    this.p.textContent = "Hola mundo!!";
    this.appendChild(this.p);
    this.appendChild(template);


  }

}
//Para definir nuestra clase como etiqueta hacemos lo siguiente
  //El define nos ayuda a definir el nombre de la etiqueta que utilizaremos
    //Define recibe dos parametros  el primero es el nombre de nuestra etiqueta
      //El segundo es el nombre de la clase

customElements.define('my-element', myElement);

Les dejo el link de MDN que habla de los custom elemets, esta muy buena la explicación pero sobre todo explica porque se usa la función de customElements.define()
https://developer.mozilla.org

Los nombres de las clases deben estar en PascalCase!

hola esto tambien funciona sin necesidad de colocar el atributo type = “module” a nuestra etiqueta script. saludos

**Snippet **para utilizar web-components en vscode.

{
  "webComponent": {
    "prefix": "webComponent",
    "body": [
      "class $1 extends HTMLElement {",
      "  constructor() {",
      "    super();",
      "    this.attachShadow({ mode: \"open\" });",
      "  }",
      "",
      "  static get styles() {",
      "    return /* css */`",
      "      :host {",
      "        $4",
      "      }",
      "    `;",
      "  }",
      "",
      "  connectedCallback() {",
      "    this.render();",
      "  }",
      "",
      "  render() {",
      "    this.shadowRoot.innerHTML = /* html */`",
      "    <style>${$1.styles}</style>",
      "    <div class=\"container\">",
      "      $3",
      "    </div>`;",
      "  }",
      "}",
      "",
      "customElements.define(\"$2\", $1);",
      "",
    ],
    "description": "Crear un WebComponent nativo (JS Vanilla)"
  }
}

Jugando con lo aprendido en clase logré hacer lo siguiente, no es mucho pero es trabajo honesto jaja, está sin estilos ya que solo me enfoqué en asignar los valores del innerHTML desde afuera de la clase. Adicionalmente añadí una función que muestra la hora del sistema.

const setTitle = () => `Titulo`;
const setDescription = () => `Descripción del item`;

class myElement extends HTMLElement {
  constructor() {
    super();
    this.container = document.createElement("div");
    this.titleText = document.createElement("h1");
    this.setDescription = document.createElement("p");
    this.postTime = document.createElement("p");
  }

  connectedCallback() {
    this.titleText.innerHTML = setTitle();
    this.setDescription.innerHTML = setDescription();
    this.postTime.innerHTML = myFunction();
    this.container.append(this.titleText, this.setDescription, this.postTime);
    this.appendChild(this.container);
  }
}

function myFunction() {
  let date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();
  return `${hour}:${minute}`;
}

customElements.define("my-element", myElement);

En un video anterior se mencionaba que los Web Components tienen un encapsulado perfecto, pero al menos este ejemplo parece que no lo es, pues los estilos definidos en el componente afectan lo que esta afuera de él.

Supongo que es un tema que se tocará más adelante, xq incluso Diego menciona algo llamado “shadow DOM” que creo tenia que ver con eso, pero es bueno saber que no los Web Components no son inherentemente bien encapsulados y pueden afectar al resto de la pagina donde se usan.

const template = document.createElement('div')
template.innerHTML = `
    <style>
        p {
            background-color: gray;
        }
    </style>
    <p>Hello world!!</p>
    <p>Hello world 2!!</p>
`

class Element extends HTMLElement {
    constructor(){
        super();
        this.h1 = document.createElement('h1');
    }
    connectedCallback() {
        this.h1.textContent = 'Hello World'
        this.appendChild(this.h1)
        this.appendChild(template)
    }
}

customElements.define("my-element", Element);

,

super https://www.w3schools.com/jsref/jsref_class_super.asp

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();```

Código HTML

<body>
    <my-element></my-element>
    <script type="module" src="./my-element.js"></script>
</body>

Código JS

const template = document.createElement('div')
template.innerHTML = `
<style>
    .texto {color:red;}
    p {color:blue;}
</style>
<p class="texto">Hola mundo 2 !!</p>
<p>Texto ejemplo para la clase !!</p>
`;

class myElement extends HTMLElement {
    constructor() {
        super()
        /*console.log('Hola mundo') */    
        this.p = document.createElement('p')
    }
    connectedCallback(){
        this.p.textContent = 'Hola mundo!!'
        this.appendChild(this.p)
        this.appendChild(template)
    }
}

/* Definir la etiqueta */
/* .define('nombre-de-la-etiqueta', clase) */
customElements.define('my-element', myElement)

min 11:15 Styled-Components? 😄