<mi-mensaje casi-visible msj="Hola, soy un mensaje"></mi-mensaje>
mi-mensaje {
display: block;
padding: 10px;
border: 5px solid black;
margin-bottom: 10px;
}
mi-mensaje[casi-visible] {
border: none;
}
class MiMensaje extends HTMLElement {
// propiedad para escuchar solo los atributos definidos en el arreglo usando
// attributeChangedCallback(attrName, oldValue, newValue)
static get observedAttributes() {
return ['msj'];
}
// propieda 'msj' sincronizada con el atributo 'msj'
get msj() {
return this.getAttribute('msj');
}
set msj(msj) {
this.setAttribute('msj', msj);
}
// Pintar el mensaje que se declara en el atributo 'msj'
pintarMensaje(msj) {
this.innerHTML = msj
}
constructor() {
super();
this.addEventListener('click', function(e) {
alert('Click en mensaje');
});
console.log('constructor: Cuando el elemento es creado');
}
// callback cuando se inserta el elemento en el dom
connectedCallback() {
console.log('connectedCallback: Cuando el elemento es insertado en el documento');
}
disconnectedCallback() {
alert('disconnected: Cuando el elemento es eliminado del documento')
}
adoptedCallback() {
alert('adoptedCallback: Cuando el elemento es adoptado por otro documento');
}
// Cuando un atributo es modificado, solo son llamados los atributos observados,
// Estos son los definidos en la propiedad observedAttributes
attributeChangedCallback(attrName, oldVal, newVal) {
console.log('attributeChangedCallback: Cuando cambia un atributo');
if (attrName === 'msj') {
this.pintarMensaje(newVal);
}
}
}
customElements.define('mi-mensaje', MiMensaje);
let miMensaje = document.createElement('mi-mensaje')
miMensaje.msj = 'Otro mensaje';
document.body.appendChild(miMensaje);
// Tambien puedes crear un elemento con el operador new
let tercerMensaje = new MiMensaje();
tercerMensaje.msj = 'Tercer mensaje';
document.body.appendChild(tercerMensaje);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.